在 Safari 中滚动时元素消失 - -webkit-transform 修复仅在第一次有效 [英] Elements disappear when scrolling in Safari - -webkit-transform fix only works the first time

问题描述

这只发生在 iPhone 大小的 Safari 中.我知道这个问题的通常修复"是应用 -webkit-transform: translate3d(0,0,0);(根据 Serge 的回答 在这里)，这确实解决了问题，但只有一次.

This only happens in iPhone-sized Safari. I am aware that the "usual fix" for this issue is to apply -webkit-transform: translate3d(0,0,0); (per Serge's answer here) and that does fix the issue, but only once.

当用户单击菜单按钮时打开的抽屉"菜单会出现此问题.菜单会正常显示，但当用手指触摸/滚动时，整个菜单从页面上消失.应用 -webkit-transform: translate3d(0,0,0) 解决了这个问题，但只是第一次.如果菜单关闭并再次打开，问题会再次出现.我已经确认 -webkit-transform: translate3d(0,0,0) 属性仍然在菜单上(但是它在 Safari 开发者工具中变灰了——变灰了，没有被划掉线穿过它).

The issue occurs with a "drawer" menu that opens when the user clicks a menu button. The menu will show normally, but when it is touched/scrolled by a finger, the whole menu disappears from the page. Applying -webkit-transform: translate3d(0,0,0) fixes the issue, but only the first time. If the menu is closed and opened again, the issue reappears. I have confirmed that the -webkit-transform: translate3d(0,0,0) property is still on the meny (however it is grayed out in Safari developer tools- grayed out, not crossed out with a line going through it).

我在页面中添加了一些 JavaScript，以便在打开菜单时将 -webkit-transform: translate3d... 属性应用于菜单，虽然这确实永久解决了问题，但我不考虑它干净到可以真正修复.

I added some JavaScript to the page so that when the menu is opened, it applies the -webkit-transform: translate3d... property to the menu, and while that does fix the issue permanently, I don't consider it clean enough to be a real fix.

我还尝试在父级上以各种组合应用 -webkit-overflow-scrolling: touch 和 -webkit-transform: translate3d(0,0,0)元素、子元素等，并且在第一次尝试"之后无法解决问题.

I have also tried applying -webkit-overflow-scrolling: touch in various combinations with -webkit-transform: translate3d(0,0,0) on the parent element, child elements, etc. and have not been able to fix the issue beyond the "first try".

推荐答案

因此，由于这个众所周知的 Safari 问题仅发生在具有 position: relative 的元素上，因此我最终通过设置 position: fixed.无需添加 -webkit-overflow-scrolling: touch 或 -webkit-transform: translate3d(0,0,0).

So since this well-known Safari issue only occurs on elements with position: relative, I ended up fixing the issue by setting position: fixed on the scroll container element. No need to add -webkit-overflow-scrolling: touch or -webkit-transform: translate3d(0,0,0).

如问题部分所述，-webkit-transform: translate3d(0,0,0) 修复了问题，但只是第一次打开菜单.一旦它在没有刷新页面的情况下关闭并重新打开，就会出现问题，就好像根本没有应用任何修复程序一样.

As mentioned in the question part, -webkit-transform: translate3d(0,0,0) fixed the issue, but only for the first time the menu was opened. Once it was closed and reopened without a page refresh, the issue would occur as though no fix was applied at all.

如果您正在处理同样的问题，请考虑使用 position: fixed.如果您遇到由用户显示和隐藏的元素(如汉堡包菜单)的问题，您应该可以设置 position: fixed 在用户调用它时显示的父滚动容器上.

If you're dealing with this same issue, consider using position: fixed. If you're experiencing this issue with an element that is shown and hidden by the user (like a hamburger menu), you should be okay to set position: fixed on the parent scroll container that is shown when the user invokes it.

这篇关于在 Safari 中滚动时元素消失 - -webkit-transform 修复仅在第一次有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！