问题
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".
回答1:
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.
来源：https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t