htmlcssmobile-safaribulmafigcaption

Issue revealing figcaption in Safari only

I’m running into an interesting CSS issue on my portfolio site that I haven’t been unable to solve on my own. I’m using the and tags to transition from an image to a caption/button on desktop hover or mobile click. Unfortunately, it works on all browsers except for Safari iOS.

On my iPhone, I’ll click one of the images and it won't respond; but if I hold down on it, I'm then able to select the caption text which is seemingly there but not visible. I don’t experience this issue on any other mobile browsers that I've tried so far.

See the “Projects” section of this page from Safari iOS to attempt to duplicate the bug.

The specific lines of code regarding this issue can be found here (HTML) and here (CSS).

Note that I used the Bulma CSS framework to create the site, and have since tried several manual changes/additions to the CSS for this section in an attempt to resolve the issue. No luck yet. Any ideas?

Solution

  • The issue is the .overlay div inside of figure. Because it span the entire width and height of the parent, it's blocking clicks (taps) on mobile and preventing figcaption from being revealed.

    enter image description here

    One way to fix this without JavaScript (the dream) is to add tabindex="0" on the figure element.

    <figure class="image is-3by2" tabindex="0">

    Adding tabindex will allow the element to respond to :focus, removing the overlay when figure has been touched.

    .image.is-3by2:focus .overlay {
  display: none;
}