Posts Tagged ‘iphone ios’

3 Comments

Fixing the iPhone CSS hover problem on iOS

Wednesday, November 6th, 2019

Mobile phones don’t have a mouse, your fat fingers kinda act like a giant mouse.

There is major difference: a mouse can click, drag and  hover above the screen, while your finger can click and swipe, but not hover. Well they can, but nothing is happening then.

So those nice old style CSS-only dropdown menu’s won’t work on your phone, because the depend on :hover.

They work on Android or Firefox browsers, as those browser developers looked for compatibility, and made a click with your fingers act like hover on elements that are not a link.
That is smart thinking, and good care for compatibility. Keep old sites working.

But they don’t work on iPhone or mobile Safari, so we need a solution for that.

Plain HTML is and has always been responsive. It’s the CSS that destroyed it, by setting explicit width.  Well there was no max-width, so designers had not much choice. 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.

Pity the Apple people. An iPhone with mobile Safari doesn’t do :hover, breaking compatibility for old sites, and forcing webdevelopers to use `Javascript`  for these trivial things. Annoying.

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.

We need better solutions!

How to make :hover  work on Safari iOS on iPhones and iPads.

Here are a few very simple options, that I came up with having a new iPhone 11 around for a couple of days. Tested on the latest iOS 13.
(more…)