Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 316
Mike Marcacci Avatar asked Oct 04 '13 02:10

Mike Marcacci


1 Answers

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!

like image 103
Mike Marcacci Avatar answered Sep 25 '22 16:09

Mike Marcacci