Fixing the iPhone CSS hover problem on iOS

{}
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.

1. Add a onclick attribute to the body

<body onclick >

This miraculously makes the CSS rule :hover work on other elements.  Don’t ask me the logic. Simple and short. You could also use ontouchend, ontouchstart or ontouchmove.

2. Add a ontouchmove attribute to the html element

<html ontouchmove >

This also miraculously makes the CSS rule :hover work on other elements in the body. You could also use ontouchend, ontouchstart or ontouchmove.

3. Add a tabIndex attribute to the body

<body tabIndex=0 >

This also makes the CSS rule `hover` work, also simple, and it is the only one that works when users have disabled Javascript. (Which really improves privacy, security, speed, and battery life and saves tons of MB’s.)

This example has another Apple special: the webkit prefix for -webkit-backface-visibility. Why on earth is that still needed in 2019? Apple fix your stuff!

4. Add a small javascript in the document head:

<script>
document.addEventListener("click", x=>0)
</script>

Adding a Javascript listener to the document, also makes :hover work. Doesn’t matter which type, as long you’re using a click or any mouse-event: touchstart, touchend  or touchmove

From all solutions <html ontouchmove > is the most poetic. A piece of code that keeps the internet moving on the touchscreens of you’re iPhone or iPad.

This small piece of code is a giant leap for accessibility
.

But solution 3 is the one to go for. In the end we shouldn’t force Javascript on users, do we? And it’s according to the specs.

Please let me know if this works for you. And please add a comment if it doesn’t work!

 

Tags:

3 Responses to “Fixing the iPhone CSS hover problem on iOS”

  1. Matt Says:

    Wow, this is a simple solution. It works on my iPhone, have you tested it on other phones?

  2. Tommy Says:

    Awesome!

  3. webonomic Says:

    @Matt, Nope. Just on the latest iPhone 11.

Leave a Reply