hlqqia
Last Updated: August 15, 2017
·
18.62K
· benuuts
Nrwejaxk normal

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

Say Thanks
Respond

8 Responses
Add your response

21173
0 lwfcftu9nd9owluclwxlfr2vnil15ldcpurjfrpwwa5gstvbjs0mwkebs5ad6g2rkedyhbcn98g4

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

over 1 year ago ·
21194
Cf6499b733542b69cf0dfd84200bc5c4 normal

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
None

Worked perfectly, thank you!

over 1 year ago ·
24186
0 o y3pn5ybnciah37o9g pqzazbl71 37kneypqbgotay2f9ftqudtn12rj5lkkh 0ay01pvwfnhe

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
I qkd9az normal

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

over 1 year ago ·
26496
0 vigezkpb88w1kooybdlzzfonh dlxuoyc29zzfpe0ljtr0dojd qubekamsmby0tnhhnv8ghxppi

Great fix my friend,

over 1 year ago ·
26497
0 yss4elz4xatk s0qlpg98ty4541k6w jgw2nskyjgxca6u napam5tyj64iki4tjnsa4uzlmuoalh75zaoxx8akvdoarh7nqaoxrwr5zg0xyomseg7dvikwwwwihw73lzgrq2aca yj

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.

8 months ago ·