Safari 浏览器 z-index 或变换 CSS 属性问题 - 元素不可见/背景

Question

我在 Safari( 移动和桌面 )中遇到了 HTML 元素可见性问题，无法在前台呈现，我已经花费了至少 8 小时的专门故障排除来尝试解决。

我所追求的概念似乎很简单；我正在尝试显示几个标签( <p> 和 <a> 在 <div> 中，即 position:absolute;。我正在利用强制绝对定位的第 3 方 Javascript 覆盖流，但我'愿意进行任何修改以使其正常工作。

我自然认为这是 z-index仅影响 Safari 的问题，但在 Chrome、IE、Edge 和 Firefox(包括 Android 移动设备)中没有呈现问题。

当查看来自 iOS/Safari 和可能的 macOS 的媒体封面流时，可以在 www.bibleanthem.com 上轻松复制该问题；在最初加载的一秒钟内，元素是可见的，然后专辑插图移动到前景。您还可以在专辑插图的下边缘的角落看到轻微的“+1”徽章。 您甚至可以单击两个不可见按钮的位置并与文档进行交互(例如立即播放歌曲或添加到播放列表) .

我试过的

改变(和 IIRC 完全下降)transform每个 Coverflow 项目的用法(有关重要​​说明，请参阅下面的“其他详细信息”部分)

z-index变化(包括像 10000000000000 这样大得离谱的值)

更改 position为父 div 固定、相对、粘性

更改 position对子元素进行固定、相对、粘性

更改 display block 和行内 block 之间

更改 overflow在层次结构中的大多数元素上

更多详情

我过去曾看到 Safari 不能很好地与 transform 配合使用的问题;这可能是这里的问题，症状与我过去的经历非常相似，但我无法解决这个问题。这就是我猜问题实际所在的地方。

每个 Coverflow 项目的渲染 HTML

<div style="position: absolute; display: block; overflow: visible; left: 0px; top: 0px; margin: 0px; padding: 0px; max-width: none; max-height: none; border: none; line-height: 1; background-color: transparent; backface-visibility: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 95px; transform: translate(142px, 119px); opacity: 1;"><p class="largeLabel"><a href="javascript:;" onclick="...not shown" title="Add to Playlist (play next)" class="rel-title-play-next round-button"><i class="fa fa-list-ol"></i><span class="badge">+1</span></a><a href="javascript:;" onclick="...not shown" title="Play Immediately" class="rel-title-play-now round-button"><i class="fa fa-play play-btn-adjust"></i></a></p><p class="smallLabel"><span class="title-cf-main">Song Title</span><br><span class="title-cf-artist">Artist Title</span><br><span class="title-cf-verse">Acts 17</span></p></div>

如何重现

从桌面或移动 Safari 访问 www.bibleanthem.com 并注意专辑插图如何在标签/文本上进行前景定位。

所需的最终状态

蓝色背景标签、歌曲标题、艺术家标题和诗歌标题应可见 以上封面流中的专辑插图(在非 Safari 浏览器中可见)

提前感谢您提供的任何帮助。我无法告诉你我会多么感激解决这个问题!

Answer 1

尝试在 div 而不是标签上设置 z-index。如果你创建一个 fiddle ，我会多玩一点。