Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by David Andrews
David Andrews
7,417 Points

Background attachment is messed up in IE and Microsoft Edge.

I have an image with a background picture and I set it to "background-attachment: fixed;"

It works great in Chrome and Firefox, but in IE and the new Microsoft Edge browser it flickers when I scroll.

Any help would be awesome!

1 Answer

Zach Patrick
Zach Patrick
19,209 Points

Hey David, I was having the same issues with my site as well, and I discovered that it is a known issue with IE and now Edge. I just used some jQuery to turn off the smooth scrolling that is turned on by default in those browsers. Below is the script I added to the bottom of my page. You can visit my site if you want to see it working.
zachpatrick.com

Hope that helps.

    <script>
    if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
        $('body').on("mousewheel", function () {
            event.preventDefault();
            var wd = event.wheelDelta;
            var csp = window.pageYOffset;
            window.scrollTo(0, csp - wd);
        });
    }
    </script>
David Andrews
David Andrews
7,417 Points

Wow, quick response! Thank you, I will try that out and see if it works!

David Andrews
David Andrews
7,417 Points

This seems to be just what I needed, Thanks!