Geek Answers Handbook

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

There is a pretty big mistake in Safari 7 on Mac and iOS, which is hard to find, but pretty easy to fix.

In some situations, when using the position: fixed, Safari 7 cannot draw part of the page when scrolling. This can be seen at http://ruelculture.com/glitchy.html by clicking on the arrow, after waiting a bit and scrolling through the backup.

+8
css safari mobile-safari ios7
source share
2 answers

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

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

Take a look in the wild at http://ruelculture.com/ . What is it!

+12
source share

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

0
source share

More articles:


All Articles