Search code examples
mobilescrollsafariwebkitwebkit-transform

Elements disappear when scrolling in Safari - -webkit-transform fix only works the first time

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.

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).

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.

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".

Solution

  • 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).

    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.

    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.