DIVs flickering when positioning them fixed when scrolling inside a Div

Question

I have 4 DIVs and I am changing positions of 4 elements on scroll like below

 function adjustPositions(e) {
    var div = e ? $(this) : $('.parent');
    div.find('.left').css({
      left: div.scrollLeft() + "px"
    });
    var right = div.find('.right');
    right.css({
       left: div.scrollLeft() + div.width() - right.width() + "px"
    });
    div.find('.header').css({
       top: div.scrollTop() + "px"
    });
    var bottom = div.find('.footer');
    bottom.css({
      top: div.scrollTop() + div.height() - bottom.height() + "px"
    });
 }
 adjustPositions();
 $('.parent').on('scroll', adjustPositions);

Here is the fiddle http://jsfiddle.net/8NL2S/5/, when I am testing it in Safari, it flickers. Nothing fancy in this. Safari kicked my hopes like this in same case many times. How can I fix this.

Answer 1

I might be thinking too simple here, but doesn't position: fixed solve your problem?

I'm afraid there is no good solutions including javascript. Safari's speed in handling javascript just isn't good enough yet, to get a fluent animation.

Below you'll find the next best solution to solve your problem, using only css.

I edited your CSS to the following:

.header{
    width:1000px;
    height:100px;
    background-color:#F2F2F2;
    position:fixed;
    top:0px;
    left:0px;
    z-index:10;
}
.left{
    height:1000px;
    width:100px;
    left:0px;
    position:fixed;
    top:100px;
    background-color:#CCC;
}
.right{
    height:1000px;
    width:100px;
    right:0px;
    position:fixed;
    top:100px;
    background-color:#CCC;
}
.footer{
    width:1000px;
    height:100px;
    background-color:#F2F2F2;
    position:fixed;
    left:0px;
    bottom:0px;
    z-index:10;
}
.static{
    height:1000px;
    width:1000px;
    position:relative;
}

I removed all javascript. Apart from that, nothing changed.

See fiddle