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

Question

我在 Safari（移动和桌面）中无法在前台呈现HTML 元素的可见性问题，我已经花了至少 8 个小时的专门故障排除试图解决这个问题。

我所追求的概念似乎很简单；我正在尝试显示几个标签（<p>'s 和<a>'s 在 a <div>that is 中position:absolute;。我正在利用强制绝对定位的 3rd 方 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块和内联块之间
• 更改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。如果你创建了一个小提琴，我会多玩一会儿。