Reputation: 1
I'm a novice of JS and I'm trying to get this result (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup) but I've got some problem with the mobile view of this code...it works good on every other devices but not on iPhone (x, 8, etc). How is it possible?
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
Upvotes: 0
Views: 1411
Reputation: 2812
If the problem happens exactly on Safari, it might be due to the missing cursor: pointer;
in your CSS.
Safari doesn't like to fire your functions on HTML elements that don't follow certain conditions.
By the way, even if they do (according to my personal experience) it's not guaranteed that your listeners will actually fire.
It happens due to the fact that browsers like Safari or IE seems to be more about a good joke than a good browser.
How do we deal with that?
Well, IRL we mostly use some libraries (for instance, Vue or React) that perform cross-browser optimization better than we do.
For your simple use case, you might want to convert your "myPopup" element into a zero-styled button.
All major browsers tend to work more or less ok with buttons.
Upvotes: 2