hlqqia
Last Updated: January 31, 2018
·
26.5K
· benuuts

IE Fix for "jumpy" fixed bacground

---------- THE UPDATED VERSION OF THIS PROTIP IS AVAILABLE HERE -----------

If you are using fixed backgrounds on your website such as here, you may experience issues on IE (I'm on IE11 Windows 8).

Your fixed backgrounds may jump around and jitter when scrolling with mousewheel. (Like this)

A way to fix this is to disable smooth scrolling on IE, but it won't help your users.

So another way is to fix it by overriding the mousewheel event on IE like this.

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

Hope this can help someone :)

PS :

Also -webkit-backface-visibility: hidden; can break your background-attachement in chrome (speak from experience).

---------- THE UPDATED VERSION OF THIS PROTIP IS AVAILABLE HERE -----------

8 Responses
Add your response

21173

Your solution was TIP-TOP my friend! Thank you greatly!!

over 1 year ago ·
21194

This is great, but the issue is still there for touchscreen Win8,1 laptops when you swipe to scroll or use the trackpad to scroll and also for keyboard up and down. Let's hope Microsoft fix it soon, it was first reported in February 2014!

over 1 year ago ·
23364

Worked perfectly, thank you!

over 1 year ago ·
24186

Oddly, this worked on a thursday, then when I came in the next day it did not fix the issue and broke all other browsers. In all but IE the CSS was 'broken' in such a way that the background was gone and all elements floated left while IE looked fine but the jumping was an issue again. Has anyone else noticed the return of this issue?

over 1 year ago ·
24446

My matter was able to be settled. It is thanks to you. Thank you very much. from Japan.

over 1 year ago ·
26496

Great fix my friend,

over 1 year ago ·
26497

this solution doeasn't work for me. can you help me? ;)

over 1 year ago ·
28776

Hello, this code works with mousewheel event, but if I try to scroll website using the scroll-bar obviously this code don't work.
Any solution?

Thanks.

over 1 year ago ·