IE 10 and 11 capture background jumps when scrolling with the mouse wheel

Question

When you scroll the mouse wheel in Windows 8, the fixed background image bounces like crazy. This only affects IE 10 and IE 11. It also affects elements with position:fixed . Here is an example with a fixed background image:

http://www.catcubed.com/test/bg-img-fixed.html

Here is a sample code:

 #section{ position: fixed; top:0; left:0; background-color:#eee; background-position: top left; background-image: url("images/7.png"); background-size: auto; background-repeat: no-repeat; z-index: 10; } 

Is there a solution to keep the background in IE 10 and 11?

Answer 1

I know it's a bit late for an answer, but I had the same problem and I was able to fix it by adding these attributes to my CSS file

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

From the comments:

This solution prevents scrolling events from being triggered in the window, so be careful if you use everything that depends on the triggering of such events. codepen.io/anon/pen/VawZEV?editors=1111 (overflow: hidden, scroll events do not work) codepen.io/anon/pen/PNoYXY?editors=1111 (overflow: automatic, scroll events fire) - Dan Abrey

So this can cause some problems in your projects. But I see no other way around this error in IE.

Answer 2

It looks like a z-index error, try adding z-index: 1.

In this, I found a better way to debug:

Create a simple element at the top of the page, for example

  <style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style> <div id="test">Test</div> 

In all of the above cases, this works correctly, and the scroll is smooth. So this proves that it can be done! Now slowly add your properties back until you can get an item with a fixed position to work in the context of your site.

Then I found that adding a z-index to the fixed elements resolved the issue. (e.g. z-index: 1)

I also found that after the position is set on the child, the error presents it itself from this point down / forward. Thus, you need to make sure that none of the children has a given position, or if they do, you explicitly set the position for each child.

eg.

 <!-- Works --> <div style="position: fixed;"> <div>Nice</div> <div>Wicked</div> <div>Cool</div> </div> <!-- Element with position: relative, experiences the bug --> <div style="position: fixed;"> <div style="position: relative;">sad</div> <div>sad</div> <div style="position: fixed;">happy</div> </div> 

This is a fix, but will require some configuration!

Answer 3

The following is a workaround (tested on Windows 8.1):

Move the CSS "background" property to the BODY element . It is currently in a div element with id = "filler". Here is the CSS result:

  body { font-family: Helvetica, Arial, sans-serif; background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px; } #filler { text-align: center; } .big-margin { margin-top: 500px; } 

Answer 4

try disabling the smooth scroll function.

Internet Options - Introduced Tab - Using Smooth Scrolling

it's like a rendering error. The MS IE team is investigating ....

Answer 5

The fix in my case was to simply remove the z-index property from the element with the position: fixed, IE then stopped the weird flickering.

(disable smooth scrolling through IE parameters, working with the z-index property, but this is not a solution, since users most likely turned it on by default).

Answer 6

just define the body container for relative.

 <style> body { position: relative; } </style>