How we solved the IE 11 fixed background bug

In our efforts to make the best possible experience with all of our themes, we attempted to fix a reported bug regarding fixed backgrounds in Internet Explorer 11. It seems this fix has been corrected by Microsoft internally, but since there will be no further releases of IE 11 anytime soon (if ever) as their focus is now on the Edge browser a workaround is needed to circumvent the bug.

So rather than implement various hacks in the program itself (which could have an impact on other things), we decided to go with a more sensible workaround that you can implement if you choose to use a fixed background. There are two types of workarounds that you can choose. One being a CSS solution and the other a JavaScript solution. You will add the following code to each page that you are using a fixed background for it to function correctly in Internet Explorer 11.

CSS Option:

Paste this code in the HEAD section located under the Settings pane section: 

<style> 
html{overflow: hidden;}
body{overflow: auto; height: 100%;}
</style>
Using CSS:
CSS
 

Can cause other issues...

This solution could create some potential issues with the smooth scrolling plugins used with Google Chrome.

JavaScript Option:

Paste this code in the FOOTER section located under the Settings pane section:


<script>
if(navigator.userAgent.match(/Trident\/7\./)) {
  document.body.addEventListener("mousewheel", function() {
    event.preventDefault();
    var wd = event.wheelDelta;
    var csp = window.pageYOffset;
    window.scrollTo(0, csp - wd);
  });
}
</script> 
Using JavaScript:
JavaScript
 

Keyboards and touch devices

The JavaScript solution only corrects the issue when using a mouse. It does not work with keyboards or touch devices.

For any feedback or questions, you can message Scott or Adam on Facebook, leave a note in the CoffeeCup user forums, or on our Facebook page. Want to share this article? Please help make RSD known to the world by sharing it on any (or all) of the buttons at the top of the page, Twitter, Facebook, Pinterest or Google+.