I think the explanation is quite simple: “ontouchmove” activates a touch latency to separate tapping events from moving/scrolling events. But fixed it! Don’t know how it does it (!), but congratulations and many thanks. Worked on Samsung Galaxy 10, even worked with Safari on desktops – but not on mobile Safari. Worked on W10 with Firefox, worked with Chrome and Edge. Tabindex has a strong use for accessibility, isn’t it going to mess up the tab navigation and screen reader use ? I am iOS 13.5 (not 13.5.x) on both my iPhone (iPhone 11 Max Pro) and my iPad (Original 9.7″ iPad Pro) How if we dont want hover to work on iOS devices,Since its taking a double click on iOS devices to open a link or select a color etc. I tried it on an older iPad Mini, and it wasn’t working with JavaScript disabled, which is the main goal (HTML/CSS solution). It behaves different on a modern iPhone with iOS 13 than on an older iPad Mini. Unfortunately not all Apples taste the same. June 17th, 2020 at 11:27 which iOS version do you use? I don’t have that problem. The other 3 all leave my page in a state with something hovered. THANKS!Ī) THANK YOU very much for documenting these solutions!ī) ONLY #4 allows me to TURN-OFF the hover by tapping on a non-hover portion of the screen. You just answered my problem after 30 minutes of searching. It works on my iPhone, have you tested it on other phones? You can leave a response, or trackback from your own site.ġ1 Responses to “Fixing the iPhone CSS hover problem on iOS” You can follow any responses to this entry through the RSS 2.0 feed.
On Wednesday, November 6th, 2019 at 5:59 pm and is filed under browser, CSS3, HTML5, mobile, Webtechnology. And please add a comment if it doesn’t work! Please let me know if this works for you. In the end we shouldn’t force Javascript on users, do we? And it’s according to the specs.
BLOCS APP HOVER EFFECTS CODE
This small piece of code is a giant leap for accessibility.īut solution 3 is the one to go for. A piece of code that keeps the internet moving on the touchscreens of you’re iPhone or iPad. Doesn’t matter which type, as long you’re using a click or any mouse-event: touchstart, touchend or touchmoveįrom all solutions is the most poetic.
Add a small javascript in the document head: Īdding a Javascript listener to the document, also makes :hover work. Why on earth is that still needed in 2019? Apple fix your stuff!Ĥ. This example has another Apple special: the webkit prefix for -webkit-backface-visibility. ( Which really improves privacy, security, speed, and battery life and saves tons of MB’s.) This also makes the CSS rule `hover` work, also simple, and it is the only one that works when users have disabled Javascript. You could also use ontouchend, ontouchstart or ontouchmove. This also miraculously makes the CSS rule :hover work on other elements in the body. Add a ontouchmove attribute to the html element This miraculously makes the CSS rule :hover work on other elements. Here are a few very simple options, that I came up with having a new iPhone 11 around for a couple of days.
BLOCS APP HOVER EFFECTS HOW TO
We need better solutions! How to make :hover work on Safari iOS on iPhones and iPads. There are examples on the internet how to fix that, like adding an onclick attribute to every element you want the :hover rule for, but that’s adding a lot of code, and the elements the don’t hide again when you click somewhere else. An iPhone with mobile Safari doesn’t do :hover, breaking compatibility for old sites, and forcing webdevelopers to use `Javascript` for these trivial things. But remove all CSS and magically your HTML will be responsive, except for tables and large images, but at least you can scroll them into sight so everything is still accessible. Well there was no max-width, so designers had not much choice. It’s the CSS that destroyed it, by setting explicit width. Plain HTML is and has always been responsive. Keep sites accessible without forcing Javascript.īut they don’t work on iPhone or mobile Safari, so we need a solution for that. That is smart thinking, and good care for compatibility.
BLOCS APP HOVER EFFECTS ANDROID
Hover events work on mobile Android or Firefox browsers, as those browser vendors looked for compatibility, and made a click with your fingers act like hover on elements that are not a link. So those nice old style CSS-only dropdown menu’s won’t work on your phone, because the depend on :hover. So touch events don’t know about hover, cause that is a mouse event. The official terms here are: mouse-events, touch events, and pointer events, for both mouse and touch events. Well they can, but nothing is happening then. There is major difference: a mouse can click, drag and hover above the screen, while your fingers can click and swipe, but not hover. Mobile phones don’t have a mouse, your greasy fat touchy fingers have to do the job, they kinda act like a giant mouse.
0 kommentar(er)
