Fixed background image problem in IE11 and Window 10 - jumpy movement on scroll

Hey guys,

I’m testing my new dev at the moment across mobiles and browsers. This development has taken advantage of BB’s brilliant ability to add a background images to rows - we have many!! and we love em!!

But in IE11 it is very jittery and jumpy, my school testers have all noted this - their browser of choice sadly is IE! It’s a bit off putting to the user. I have searched for a solution, and it seems it could be a long ongoing problem specific to IE.

https://connect.microsoft.com/IE/feedback/details/806682/fixed-background-image-jumps-up-and-down-during-scroll

But some seem to have found workarounds. I came across this link, but dont know how to make it work with BB?:

https://coderwall.com/p/hlqqia/ie-fix-for-jumpy-fixed-bacground

Has anyone out there or the BB team heard of any workarounds for this? Do you think the above solution wouyld work for us?

Many thanks

Kat

Hey Kat,

Just letting you know that we’re checking on this. We might not have anything until Monday though. :slight_smile:

Ben

Hey Kathryn,

Just letting you know that we were able to recreate this and have filed a bug report. We should be able to get a fix in the next release.

Justin

That is great news guys, thanks for squeezing it in! I’m about to launch so great timing for me :slight_smile:

Kat

Hey Kathryn,

Unfortunately with us going to WordCamp US this week, the update won’t be out until next Tuesday. I’m going to look at the issue tomorrow and see about providing a patch in the meantime. Stay tuned.

Justin

Hey Kathryn,

Would it be possible for you to post a link with the issue on your end?

Thanks,
Justin

[Content Hidden]

Thanks, Kathryn!

Unfortunately, after banging my head against this for a while, I still can’t find an elegant workaround. It appears that Microsoft has acknowledged the bug, but have yet to fix it in an update.

There is one workaround, the one you posted from CoderWall, but I’m hesitant to add that to the core builder since it’s not very elegant. However, that might be the only solution in this case. Can you try adding this to the JavaScript setting in the Customizer Code section?

if(navigator.userAgent.match(/Trident\/7\./)) { // if IE
        jQuery('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);
        });
}

Let me know how it goes.

Justin

Hey Justin

Thanks for testing, the JS didn’t work for me though :frowning:

There’s a few interesting threads, one from Github here:

https://github.com/Prinzhorn/skrollr/issues/360

I tried a few of the JS suggestions but none worked. Should I be targeting the rows supporting the images, also changing the Z-index was mentioned, this bug has been around since 2013 as IE11 was built for win7, can only hope they address it soon…

Kat

Hey Kat,

Thanks for the detailed follow up. I realized that there is actually a core WoordPress issue in the Customizer with backslashes that may be affecting the code I posted. Can you try this…

if(navigator.userAgent.match(/Trident\\/7\\./)) { // if IE
        jQuery('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);
        });
}

If that doesn’t work, would you mind sending temporary admin access?

Thanks,
Justin

[Content Hidden]

Hey Kat,

My apologies for the delay. I logged in and it looks like there was an error in the JS that might have happened from the copy/paste. It should be working now. Can you give it a shot and let me know how it goes?

Justin

Hey Justin,

Thanks for taking the time to check and fix but I can’t see any difference, the jitter in IE11 is still there. Is this specific to this development as the fix does seem to work for others?

Thanks

Kat

Hey Kathryn,

I had a closer look at that snippet and it looks like it’s firing before the page has loaded which is probably preventing it from working. I’ve adjusted it. Can you try clearing your cache and giving it another shot? Let me know how it goes.

Justin

Hi Justin

Thanks for doing this and it did work briefly which was great, but I am having issues with the migration and some other IE problems, so had to delete the code to test compatibility then paste it back it - I thought I did this with precision from a text editor and it looked exactly the same when pasted back in but the background jitter has come back - can you tell me what you did so if i need to fix it again I know what to do?

I’ll send you the pre-production IP if you need to check.

Many thanks

Kat

[Content Hidden]

Hey Kat,

I’ve fixed the issue on your new site, at least the IE fixed background one. Here is the complete code for future references. :slight_smile:

jQuery( function() {
  if(navigator.userAgent.match(/Trident\\/7\\./)) { // if IE
    jQuery('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);
    });
  }
});

Edit: The code above is only for when you use it inside the customizer. If it’s outside of it, just remove one backslash from the double backslashes, i.e., from (/Trident\/7\./) to (/Trident/7./). :slight_smile:

Ben

Brilliant, thanks Ben (and Justin), that’s what I missed!

Just so you know, I’ve sorted my migration problem, there was an issue with missing postmeta (not images) because I installed php7.0 on the new server, when I rolled back to 5.6 it came back.

Migration process was made easy using the Interconnect S&R script.

:slight_smile:

Kat

No worries! And thanks for sharing what caused the migration issue! Have fun with BB! :slight_smile:

Ben

Hi Ben,

This problem has come back to haunt me after I added the Google analytics js tracking code in the customiser!

I changed nothing to the smooth scroll code to prevent IE from being jumpy and yet it has stopped working - can you help please?

Many thanks

Kat