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

Question

我遇到了一个问题，那就是Safari（移动和桌面）中的HTML元素的可见性没有呈现出来，而我已经花费了至少8个小时的专门故障排除来解决这个问题。

我追求的概念似乎很简单；我正在尝试在<p>的{​​{1}}中显示几个标签（<a>和<div>的标签。我正在利用第三方Javascript Coverflow这是强制性的绝对定位，但我愿意进行任何必要的修改才能使它正常工作。

我自然地认为这是一个position:absolute;问题，仅影响Safari，但在Chrome，IE，Edge和Firefox（包括Android移动设备）中没有呈现问题。

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

我尝试过的事情

• 更改每个Coverflow项的使用（并完全丢弃IIRC）z-index（有关重要​​说明，请参见下面的“其他详细信息”部分）
• transform的变化（包括10000000000000之类的大值）
• 将z-index更改为父div的固定，相对，粘性
• 将position更改为固定，相对，对子元素具有粘性
• 在块和行内块之间切换position
• 将display更改为层次结构中的大多数元素

其他详细信息

• 我过去曾发现Safari在overflow上表现不佳的问题；这可能是这里的问题，其症状与我过去的经历非常相似，但我无法解决该问题。我猜这是问题的根源所在。

为每个Coverflow项目呈现的HTML

transform

如何复制

• 从台式机或移动Safari浏览www.bibleanthem.com，并注意专辑插图如何在标签/文本上进行前景定位。

所需的最终状态

• 蓝色背景标签，歌曲标题，艺术家标题和诗歌标题应该在封面流中上方可见（在非Safari浏览器中可见）

在此先感谢您提供的任何帮助。我无法告诉您解决这个问题我将不胜感激！

Answer 1

尝试在div而不是标签上设置z-index。如果您制作小提琴，我会再玩一点。