仅在 Safari 中发布显示 figcaption

Question

我 运行 在我的投资组合网站上遇到了一个有趣的 CSS 问题，我自己无法解决。我正在使用 和 标签在桌面悬停或移动点击时从图像过渡到 caption/button。不幸的是，它适用于除 Safari 之外的所有浏览器 iOS.

在我的 iPhone 上，我点击了其中一张图片，但它没有反应；但如果我按住它，我就可以 select 看似存在但不可见的字幕文本。到目前为止，我在任何其他移动浏览器上都没有遇到过这个问题。

从 Safari iOS 中查看 the “Projects” section of this page 以尝试复制错误。

可以找到有关此问题的具体代码行here (HTML) and here (CSS)。

请注意，我使用 Bulma CSS framework 创建站点，此后尝试了几个手册 changes/additions 到 CSS 以尝试解决此部分的问题。还没有运气。有什么想法吗？

Answer 1

问题是 figure 中的 .overlay div。因为它跨越父级的整个宽度和高度，所以它会阻止移动设备上的点击（点击）并防止 figcaption 被显示。

在没有 JavaScript（梦想）的情况下解决此问题的一种方法是在 figure 元素上添加 tabindex="0"。

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

添加 tabindex 将允许元素响应 :focus，当 figure 被触摸时移除覆盖。

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