Fixed Positioned Element Flicker in Ie Only, How to Solve

How to stop flicker issue (while scrolling) in IE when position set to absolute?

Atlast, i figured it out. There is a workaround for this flicker problem. Disabling Smooth Scrolling will fix this problem.

You can find this option under Internet Options -> Advanced(Tab) -> Browsing -> Show smooth scrolling

Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

This has been a very common unsolved mystery. Recently I had the same problem, and '-webkit-backface-visibility: hidden', proved to be less than useless (on my 'fixed' attached background), since the background just disappeared when it was set. (Additional Info: the reason is that when the background is set as fixed, it is almost similar to putting a fixed 'div' in the background and setting the original div background to be transparent. Hidden backface does the obvious).

To solve the current problem, try setting the 'position' propery of the element as 'static', or if you have given it some other value, namely 'relative', 'fixed' or 'absolute', just remove those.

If you don't remember setting the position property, and the problem still persist, my suggestion is that you use a debugging tool on chrome or firefox, to

make sure there are no manually set values to the 'position' property other than
'static'.

Just spent half an hour searching... Thought this could make it easier for you... regards. :)

Positions fixed doesn't work when using -webkit-transform

After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.

I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

So for now you'll have to do it the old fashioned way, until Webkit browsers catch up to FF.

EDIT: As of 10/24/2012 the bug has not been resolved.

---

This appears to not be a bug, but an aspect of the specification due to the two effects requiring separate coordinate systems and stacking orders. As explained in this answer.

window scroll method flickers in IE

You might want to take a look at the jQuery Waypoints plugin, it lets you do sticky elements like this and a lot more.

If you want to stick with your current method, like the other answers have indicated you should toggle fixed positioning instead of updating the .top attribute in every scroll event. However, I would also introduce a flag to track whether or not it is currently stuck, this way you are only updating the position and top attributes when it actually make the transition instead of every scroll event. Interacting with the DOM is computationally expensive, this will take a lot of load off of the layout engine and should make things even smoother.

http://jsfiddle.net/WYNcj/6/

$(function () {
  var stuck = false,
      stickAt = $('#scroller').offset().top;

  $(window).scroll(function () {

    var scrollTop = $(window).scrollTop();

    if (!stuck && scrollTop > stickAt) {
      $('#scroller').css('top', 0);
      $('#scroller').css('position','fixed');
      stuck = true;
    } else if (stuck && scrollTop < stickAt) {
      $('#scroller').css('top', stickAt);
      $('#scroller').css('position','absolute');
      stuck = false;
    }
  });
});

Update

Switching the #scroller from relative to fixed removes it from the normal flow of the page, this can have unintended consequences for the layout as it re-flows without the missing block. If you change #scroller to use an absolute position it will be removed from the normal flow and will no longer cause these side-effects. I've updated the above example and the linked jsfiddle to reflect the changes to the JS/CSS.

I also changed the way that stickAt is calculated as well, it uses .offset() to find the exact position of the top of #scoller instead of relying on the CSS top value.

---

Related Topics