CSS :focus Not Working in iOS

Question

I have a box with an image in it. On hover / focus, I want a color overlay and caption to fade in over it. It works perfectly in almost every browser and device except on iOS devices.

I am using both :hover and :focus pseudo-classes to accommodate various devices, but it doesn't seem to help with iOS. Nothing happens when you mouse over.

Here is my code, and I also have a fully functioning fiddle.

* {
  padding: 0;
  margin: 0;
}
.my_image {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  position: relative;
}
.my_image p {
  position: absolute;
  color: #fff;
  display: block;
  padding: 0;
  margin: 0;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  /* IE 9 */
  -webkit-transform: translate(-50%, -50%);
  /* Safari and Chrome */
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
}
.overlay {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(121, 87, 164, .80);
  text-align: center;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
}
.my_image:hover .overlay,
.my_image:hover p,
.my_image:focus .overlay,
.my_image:focus p {
  opacity: 1;
  visibility: visible;
}

<div class="my_image">
  <img src="https://unsplash.imgix.net/photo-1428976365951-b70e0fa5c551?fit=crop&fm=jpg&h=225&q=75&w=350" />
  <div class="overlay"></div>
  <p>Overlay Caption</p>
</div>

Is there some way I can make this work without JS? I am using jQuery on the page so I'm not totally opposed, I just didn't think it was necessary.

possible duplicate of [:active pseudo-class doesn't work in mobile safari](http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari) — sergdenisov, Jun 01 '15 at 22:48

score 6 · Accepted Answer · edited May 23 '17 at 12:02

6

The solution in the post Sergey Denisov shared worked. You simply add ontouchstart="" to just the body element, and it magically works, like so:

<body ontouchstart="">
...
</body>

That's it! Couldn't tell you how or why this works, but it does.

edited May 23 '17 at 12:02

Community

1
1

answered Jun 02 '15 at 00:11

Brian Johnson

561
1
6
17

6

This trick doesn't seem to work anymore in Safari and Chrome on iOS 10. – kba Jul 24 '17 at 17:22

score 1 · Answer 2 · answered May 21 '21 at 22:17

1

I added tabindex="0" to the element and it seems to accept focus.

answered May 21 '21 at 22:17

Peter Hollingsworth

1,870
1
18
18

CSS :focus Not Working in iOS

2 Answers2

Linked