3

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

jspinella
  • 2,013
  • 3
  • 25
  • 39

2 Answers2

2

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.

jspinella
  • 2,013
  • 3
  • 25
  • 39
2

One alternative for anyone else looking at this:

If you have any code within a jQuery $( window ).on( "resize", function(){} );, this can be fired on scroll. In my case I was hiding a menu when the window was resized, which worked fine on desktop, but it was also being called when scrolling in iOS Safari.

Credit to this answer for pointing me towards this frustrating, well-hidden issue.

alstr
  • 1,358
  • 18
  • 34