::before 元素显示在 iOS Chrome 和 Safari 中的主元素上方

Question

我正在建立这个网站：https://bewerty.de/KUNDEN_PROJEKTE/Itau/product/#home

更好的部分之一是有点动画的菜单。

但是，如果我在 iOS Safari 和 Chrome 上打开页面，堆叠顺序（z-index）就会相反。我们正在讨论元素及其 ::before 伪元素。

我在某处读到z-index 和transform:translate3d 不能很好地结合在一起。尽管这在我的桌面浏览器上不是问题，但我删除了 z-index 并确保设置 translate3d(0, 0, 1px);在按钮元素上，并在伪元素上转换：translate3d(0, 15px, -100px)。

这并不能解决问题。添加 -webkit- 前缀也没有任何帮助......

我在这里缺少什么？

Answer 1

我最终只能通过将所有变换替换为“顶部”定位，并在 ::before 元素中添加 z-index: -1 来解决这个问题。让我度过了整个 gnikcuf 夜晚，我们什么时候才能最终用干草叉聚集在 iPhone 周围......？