We have code that loads SVG via Ajax and then interacts via Javscript. Under Mozilla, and under Safari 5, running on a PC we get click events as expected in SVG. Running Safari iPad we don't get click events. According to the Safari developer guide:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
it looks probable we should be 'Making Elements Clickable.' Apple's guide suggests one does this by adding an onclick handler. The problem is all our SVG elements already have a click handler set up via jQuery - and they still don't click.
Maybe this is because SVG is not HTML, and SVG's DOM access is not HTML DOM's access? (We've been here before.)
How do we get the iPad to listen for events on SVG elements?
To my knowledge, there is a problem with safari according this javascript - which handles canvas/SVG
It seems that click and touch is not the same.
https://github.com/kangax/fabric.js/blob/master/dist/all.js
And SVG 1.1 does not have other than click events
http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
I have the same interest, therefore I seek the same information ...
I was able to get click events working on Ipad using jquery and javascript. but my issue is that the svg blurs on an iPad.
My svg is embedded in an html object, then I just access it by calling a normal click event referenced to a function that access the svg component through:
window.top.document.getElementById('elementId');
Related
I've used Vuejs and Framework7 in my PWA. I want to open a remote PDF file in my PWA and also it's important to me that users be able to back to my PWA after opening PDF. I did this using :
window.open(pdf_url, "_blank");
And it works fine for iOS > 12 and after opening pdf file there is an "OK" button for closing pdf.
But for example in iOS 11.3 there is no button and user has to use home button to close PWA.
I tried to solve problem using iframe but I can show only first page of the pdf.
Is there any way to fix this issue?
You can resolve this issue by doing some tricks (for any device without back button):
if you use iframe, you can set height manualy with overflow scroll, and I think this will resolve issue (dependence of style or lib dependency, so that may be not work).
you can add back button to your navbar, or Toolbar to let user click on it to back to previous page. (I prefer this solution).
you can render pdf in popup nested of normal html page, and then you can customize popup component by handling back button, or handling close by dropback overlay.
I use second and third point in real project and its work fine...
This is sample close button code used in popup:
'<p>'+ i18nextHelper.i18next.t('Exit From PDF') +'</p>'
Note: You can also customize height page for pdf page only, and add normal button bellow it, or by add absolute positioning button above PDF, but I think if you use second or third point will be best.
Good luck.
Is there any way to get the default styles for iOS Safari browser?
Specifically, I need the styles for "native" elements, such as <video> player UI (which is rendered through HTML and probably styled via CSS styles, just it's not visible in the DOM inspector by default).
Here is few screenshots why I believe it's rendered via html+css and not via real native elements:
children elements insive <video> node:
a classname visible for the <div> elements inside the player UI:
These screenshots are from a youtube video, but it's not using any custom player, it's the "native html5" player from Safari.
Oh, wow, just after I have made this question I have found the answer!!!
Here is the related question.
The answer is – in the Safari inspector need to Show Shadow DOM nodes with the small <> button.
I'm trying to set up automatically focus on first loaded article. (f.e. user clicks on the button "load more" and new articles are loaded).
My react implementation:
I'm using ref attribute in <Link> component, which is from react-router library and then I'm calling focus() method in lifecycle method componentDidMount().
It works on all devices except iOS. If I turn on voiceover on iphone and then on webpage I click on the button, it doesn't automatically focus on first loaded article). It works just with html anchor tag.
I read some articles before and it looks that it's not possible to do this in this way but only with firing some event f.e. click event.
Can someone confirm that it's not possible to solve it in this way or there is any workaround without using jquery ?
I have unfortunately stumbled on the issue where, on iPad, a pop-up menu summoned by way of :hover does not disappear from the screen when the user touches an empty area of the page.
The problem is the same described here:
Hover Behavior on Desktop vs iPad
The menu is part of a template I bought, namely:
http://html.realia.byaviators.com/
But... wait a minute... it WORKS on the template's home page? And only on that page -- it doesn't work on any other page of that same template.
I was able to track the behavior down to the point where I found that the reason why it works is the following: initializing a Google map makes the menu behave properly. Just the simplest of maps, with the default options.
Now my question to the experts is: what is that Google does in the map initialization code in order to fix the :hover behavior?
Thank you very much in advance for your help!
Well, can't tell what is that Google does, however the solution is documented in mobile Safari developer's reference.
For a click event to be generated on an area of the document, there must be a click handler attached. For example, clicking on a div will generate a click event only if an onclick="void(0)" handle is presente:
Clicking here triggers event in mobile Safari
If i create a div that has contenteditable true inside of an iframe and if you double click it it becomes non functional.the focus is still in the iframe and you can see the cursor, however it does not respond to keydown
Does anyone have an idea of how I can i overcome this?
EDIT:
i have implemented a dojo editor. if you open this link in ipad you will see the problem as described above.
Which OS you are using? You should make sure that you are using OS 5.0 or later. According to the (Apple's Technical Notes) and Safari Web Content Guide. It is written:
The HTML contenteditable attribute is supported in iOS 5.0 and later. In earlier versions, replace contenteditable, used to enable text input within a styled element, with a styled textarea element. In Safari, you can customize the appearance of textarea elements using CSS. If necessary, you can even disable any platform-specific, built-in styling on a textarea element by setting -webkit-appearance to none.
So, if you are using an old OS version, you could use textarea elements instead of contenteditable. Then, it is guaranteed that your application will work as well.
PS. you can use your IPAD to go on this website, to try how does it work with textarea. It might be an example for you.
Hope that helps.
Trying to get a contenteditable div to work inside of an iframe is one level of complicated, if you are trying to get it to work inside of a specific WYSIWYG editor like Dojo editor, is another level harder, as there is a lot of JavaScript affecting the interactions. It would help to explain the parameters a little better in your question.
Have you used a browser debugger (like Firebug) to see what's happening when you click?
This other SO question and answer about contenteditable div vs iframe is useful.
Finally, if you are using iOS Safari, make sure you are using Safari 5.0 or better as the contenteditable attribute was only recently supported on that browser.
EDIT:
Since you are using iOS 6, you should be using the iOS Safari JavaScript Debugger to let you know what's happening a little more clearly when you click on the editable div. If you can find some more specific error messages, please update us.