Parts of page are invisible when scrolling on Safari 7 with position:fixed elements

柔情痞子 提交于 2019-12-20 12:46:34

问题


There's a pretty big bug in Safari 7 on both Mac and iOS that's hard to find anything on, but is pretty easy to fix.

In some situations when using position:fixed, Safari 7 fails to draw part of the page when scrolling. This can be seen at http://ruelculture.com/glitchy.html by clicking on the arrow, waiting a bit and trying to scroll back up.


回答1:


To fix this, force hardware acceleration on the disappearing element by adding the following CSS hack:

-webkit-transform: translate3d(0, 0, 0);

See it in the wild at http://ruelculture.com/. That's it!




回答2:


There is also position:-webkit-sticky;, which is made specifically for this problem. I've had mixed results with my answer and @Mike Marcacci's solution (flickering, elements disappearing when you reach the bottom of the page). I'm still trying to find the perfect solution to this problem. HTML5 Rocks =>



来源:https://stackoverflow.com/questions/19172249/parts-of-page-are-invisible-when-scrolling-on-safari-7-with-positionfixed-eleme

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!