我在 Safari(移动和桌面(中 HTML 元素的可见性无法在前台呈现时遇到了问题，我花了至少 8 个小时的专门故障排除来尝试解决。
我追求的概念似乎很简单;我正在尝试在position:absolute;<div>中显示几个标签(<p>和<a>的。 我正在利用一个第三方Javascript掩护流，它强制绝对定位，但我愿意进行任何必要的修改来使其工作。
我自然而然地认为这是一个只影响Safari的z-index问题，但在Chrome，IE，Edge和Firefox(包括Android移动设备(中没有渲染问题。
当查看来自 iOS/Safari 和可能的 macOS 的媒体掩护流时，这个问题可以很容易地在 www.bibleanthem.com 上重现;在最初加载的短暂秒内，元素是可见的，然后专辑插图移动到前台。 您还可以在专辑插图下边缘的角落看到轻微的"+1"徽章提示。您甚至可以单击两个不可见按钮的位置并与文档进行交互(例如，立即播放歌曲或添加到播放列表(。
我尝试过什么
- 更改(和IIRC完全删除(每个Coverflow项目的
transform用法(有关重要说明，请参阅下面的"其他详细信息"部分( z-index更改(包括像 100000000000000 这样的大值(- 将父div 的
position更改为固定、相对、粘性 - 将子元素的
position更改为固定、相对、粘滞 - 在块和内联块之间更改
display - 更改层次结构中大多数元素的
overflow
其他详细信息
- 我过去见过 Safari 不能很好地与
transform配合的问题; 这可能是这里的问题，症状与我过去的经历非常相似，但我无法解决这个问题。 这就是我猜问题实际所在的地方。
每个掩护流项的呈现 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 浏览器中看到(
提前感谢您提供的任何帮助。 我不能告诉你我有多感激解决这个问题！
尝试在div 上设置 z 索引而不是标签。如果你创建一个小提琴，我会再玩一会儿。