fixed positioned element flicker in IE only, how to solve?

Question

Weird problem in IE11, the fixed background of the following project flickers when using mousewheel or cursor keys only. This is a bug, for sure.

website: http://ge

Answer 1

A hardware acceleration technique as follow caused mine.

outline: 1px solid transparent;

Remove it and it might be the cause.

Answer 2

I was having the same issue, it seems to be a bug that occurs when there is too much going on inside the page for your computer specs to handle, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

 #element {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9994;
...other stuff and then
        /* MAGIC HAPPENS HERE */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

Answer 3

Three things can cause IE 11 flickering/choppy/delay for fixed position element while scrolling:

1. If you have an "overflow: auto;" on the parent container element, remove it.

2. Remove background-attachment:fixed; from the fixed position element.

3. Remove border-radius from the fixed position element (mobile IE only).

Answer 4

We can remove grey flicker on IE9, IE10, IE11, MEdge<=20 by setting overflow of html and body like

html{
  overflow: hidden;
  height: 100%;    
}

body{
  overflow: auto;
  height: 100%;
}

Answer 5

This behaviour is due to a bug with Microsofts "Smooth Scroll" feature. Happens in IE10 and 11 on Win7 and up. I wouldn't recommend to alter your perfectly working code to fix yet another MS bug. Instead disable their "feature" by opening Internet Explorers Settings, go to Advanced and in the category "Browsing" it's the last option which you need to disable "Use smooth scrolling".

Answer 6

Another reason for flickering can obviously be another fixed element inside the fixed element. At least that was the reason in my case. The false behaviour of Edge appears to be random.