問題僅在 Safari 中顯示 figcaption

Question

我在我的投資組合網站上遇到了一個有趣的 CSS 問題，我自己無法解決。 我正在使用和標簽從圖像轉換為桌面 hover 或移動設備上的標題/按鈕。 不幸的是，它適用於除 Safari iOS 之外的所有瀏覽器。

在我的 iPhone 上，我將點擊其中一張圖片，但它不會響應； 但如果我按住它，我就可以 select 似乎存在但不可見的標題文本。 到目前為止，我在任何其他移動瀏覽器上都沒有遇到過這個問題。

請參閱本頁 Safari iOS 中的“項目”部分以嘗試復制該錯誤。

可以在此處 (HTML)和此處 (CSS)找到有關此問題的特定代碼行。

請注意，我使用Bulma CSS 框架來創建站點，並且此后嘗試了對 CSS 進行幾次手動更改/添加以嘗試解決此問題。 還沒有運氣。 有任何想法嗎？

Answer 1

問題是里面的.overlay div figure 。 因為它跨越了父級的整個寬度和高度，所以它會阻止移動設備上的點擊（點擊）並防止顯示figcaption 。

在沒有JavaScript （夢想）的情況下解決此問題的一種方法是在figure元素上添加tabindex="0" 。

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

添加tabindex將允許元素響應:focus ，當figure被觸摸時刪除覆蓋。

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