IE 10 & 11 make fixed backgrounds jump when scrolling with mouse wheel

Asked 15/10, 2013 at 9:35 Answered 12/10, 2014 at 4:28

css image internet-explorer background fixed

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

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

Here is example 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 still in IE 10 and 11?

Marthmartha answered 15/10, 2013 at 9:35 Comment(6)

Found this: connect.microsoft.com/IE/feedback/details/795070/… – Marthmartha 16/10, 2013 at 7:43

Fixed elements inside fixed elements cause the jumping problem. Change the position of parent element to be, for example absolute. Absolute mostly works without any other change, or change according to your needs. – Torpedo 1/2, 2016 at 20:3

For me, the jumpy behavior was caused by opacity:0.99 on the HTML element (a fix for bolder fonts on Mac). – Jordison 8/7, 2016 at 13:22

Unfortunately this question is closed. I also struggled with this issues, during investigation I found this Javascript-based workaround: if(navigator.userAgent.match(/Trident\/7\./)) { // if IE $('body').on("mousewheel", function () { // remove default behavior event.preventDefault(); //scroll without smoothing var wheelDelta = event.wheelDelta; var currentScrollPosition = window.pageYOffset; window.scrollTo(0, currentScrollPosition - wheelDelta); }); } – Spinet 2/11, 2016 at 14:33

I just came across a case where I was able to reduce the stuttering by removing box-shadow from elements that overlap the fixed background. – Shanika 16/3, 2017 at 10:11

Why is this question closed as off-topic? It's clearly about code issue and It seem to be unresolved. For me the only thing that hellped was wrapping the fixed ellement and set to the wrapper: #fixwrapper{ -webkit-transform: translate3d(0, 0, 0); transform : translate3d(0, 0, 0); position: fixed; top: 0; height: 100%; } – Untold 24/7, 2019 at 7:18

I know it is a bit late for an answer but I've had the same problem and 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 stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey

So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.

Isia answered 14/9, 2014 at 20:34 Comment(4)

This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 (<html> overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 (<html> overflow: auto, scroll events fire) – Romanov 26/2, 2016 at 15:33

This solution is not desireable for mobile browsers, because it redefines the default scroll container which leads to slower scroll and other issues (e.g. query panel won't hide on scroll). – Heyes 12/8, 2016 at 10:50

I ended up adding this only when the browser is IE for desktop, so that the scroll containers in other browsers can work normally. For me it was ok that some features may not work in IE. .... I really don't understand how a company like MS is not able to remove this bug, which is now known for 2 years ... – Isia 12/8, 2016 at 10:59

This is the only solution I found that worked too, but I'm having an odd bug with it where I cannot scroll down the page when my mouse is over the fixed navigation bar at the top. Removing html { overflow: hidden } stops this from happening, but also breaks the parallax fix. I'm guessing this may be what @DanAbrey was referring to. Any ideas on how this solution can work without stopping these scroll events? – Intrastate 6/12, 2017 at 23:28

This looks like a z-index bug, try adding z-index: 1.

Looking into this, I've found the best way to debug is to:

Create a simple element at the top of the page, e.g.

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

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

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

I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.

So you need to ensure none of the child elements have a position set, or if they do, you explicitly set a position on each child.

E.g.

<!-- 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>

It's fixable, but will require some tweaking!

Maidel answered 28/4, 2014 at 11:32 Comment(5)

I had a similar issue with a bootstrap fixed navbar at the top of the screen. If the page also contained some fixed or absolute text, the navbar would wobble when scrolling. Just adding z-index = 1 to the fixed/absolute text fixed it. – Pad 10/5, 2014 at 17:58

I've tried all the above and can't get it to work. Still jumps only on mouse scroll :( – Bode 14/10, 2014 at 10:58

To add to this, Make sure you don't have a position:fixed element as a child of a position:fixed element make it positioned absolutely instead It will still be fixed as the parent is fixed – Swarth 19/5, 2015 at 19:51

"you explicitly set a position on each child" Worked for me. – Seymour 13/6, 2016 at 17:21

z-index did it for me, thank you! (IE11, Windows 10) – Samos 24/1, 2019 at 8:37

Here is a workaround (tested on Windows 8.1):

Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:

    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;
    }

Buenabuenaventura answered 25/1, 2014 at 16:18 Comment(3)

Wow... can't believe people overlooked this... this is actually the only semi-viable fix to the issue, until MS fixes IE's smooth scrolling. Yes, it will work for a single background image, but it's all we've got at the moment, and can be done in two minutes. – Fecteau 19/2, 2014 at 9:18

And won't work if you have multiple items on the page that are fixed. – Bode 14/10, 2014 at 10:53

This worked for me. Tried all the solutions within this answer and finally moving the background image to the body tag worked. I have two items on my page that are fixed, namely the background image and back to top button – Pilsen 27/3, 2015 at 10:7

try to turn off smooth scrolling option.

Internet Options - Advenced Tab - Use Smooth Scrolling

it's like rendering bug.... MS IE team is investigating....

Vituline answered 12/11, 2013 at 8:28 Comment(1)

@JPHellemons this only work for you. Smooth Scrolling is enabled by default. You users will have that problem. – Chesterton 30/1, 2014 at 19:56

just simply define body container to relative.

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

Daughterly answered 24/2, 2014 at 19:9 Comment(0)

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

(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).

Bobbette answered 12/10, 2014 at 4:28 Comment(0)

Recommended topics

Hot tags