Absolute Positioned Floating Header Jitters in Safari

Question

I have a simple JSFiddle of a single floating header here:

http://jsfiddle.net/zT9KQ/

Basically, this uses translate3d to kick in the GPU and ha

Answer 1

You could try and disable all and any javascript-ish scroll handling and just simply remove

position: relative; from the .container.

Afterwards just add h1{ top:0; } and it will happily stick to the .scroll-container.

Excerpt from CSS absolute positioning:

Position it at a specified position relative to its closest positioned ancestor...

To explain - your absolute H1 will look up the tree for the first ancestor element which defines a "position" property and inherit it as a 0,0 reference point.

It could be a WTF at first, but this behaviour is a powerhouse once you tame it.

EDIT: Related to the original jsFiddle, I made some more property removals:

http://jsfiddle.net/253Ss/

^ .container wrapper could be removed as well, since it is no more neccessary in a technical sense.