Parallax Background Scrolling on Internet Explorer is Not Smooth

One of the pleasures of working on a website that is using some of the latest technologies is that you often run into strange compatability issues that only affect one browser or another, and many of the forums have little to no information about how to properly address the issues. Parallax scrolling is a technique that has been around for a while now, highlighted by Apple’s own iPhone 5s card-esque scrolling on their homepage, among others. While the site I am working on does not have as elaborate a parallax implementation, it does not work instantly across browsers by default either.

When the website went into UAT and was thoroughly tested in all browsers, it was discovered that when in Internet Explorer, any time you scroll and the parallax background is visible, the background image jumps up and down. After a bit of searching, it appears that this is caused by Internet Explorer’s smooth scrolling feature, and turning it off on my local system resolved the issue for me. Unfortunately, I can’t just tell all prospective visitors to my site to turn off smooth scrolling for Internet Explorer, so I had to find a solution that replicated the effects of turning off smooth scrolling.

It turns out that the ideal way to take care of this is to completely hijack the scrolling functionality of pages implementing parallax backgrounds in Internet Explorer, replacing it with some JavaScript or jQuery controlled animations. Effectively, you should first check to make sure that Trident appears in the userAgent, and if it does, run event.preventDefault() on the scroll event on the page, and then replicate the scrolling with the jQuery scroll animation. A sample is shown below:

jQuery(document).ready(function () {
    var $html = $("body, html, document");
    if (window.navigator.userAgent.indexOf("Trident") >= 0) {
        $('body').mousewheel(function (event, delta) {
            // disable native scroll
            if (event.preventDefault) {
                event.preventDefault();
            } else { // IE fix
                event.returnValue = false;
            };
            $html.stop().animate({
                scrollTop: $html.scrollTop() + (-delta * 500)
            }, 'slow');
        });
    }
});
Tags:

Related Posts

Jul 10, 2014
One minute

Ignore Whitespace Not Available in BitBucket Pull Requests

When looking for an online location to use as the host for source code, many people by default look at GitHub, as it seems to be the most well-known option out there, and is free for open source projects. However, if you would like your source code to be kept private, or would rather use Mercurial instead of Git, GitHub may not be the place for you. Instead, I would suggest BitBucket as your source code repository provider.

#rant #web-development
Read More
Jun 23, 2014
One minute

Always URL Encode your Cookies

One of the things that you tend to forget about when dealing with websites that typically only cater to English-speaking visitors is how to properly deal with Unicode throughout the site. It turns out that some browsers handle Unicode support in different sections of the browser differently.

For instance, it turns out that when you want to store Unicode data as the value in a cookie, your success may vary across browsers. When I tested this with the Euro symbol, €, it worked without a hitch in Chrome, Safari, and Internet Explorer. However, in Firefox, it was stored as an empty string. In order to correct the issue, you can use encodeURI() on the Unicode character to get the ASCII version of the Unicode character, and then store that in the cookie. Fortunately, this seems to work without issue across all of the major browsers.

#jquery #responsive-web-design
Read More
May 21, 2014
One minute

Window.Open Causes Browser Compatibilty Issues

One of the things that always annoys me as a web developer is when native browser functions that are accesible from JavaScript do not share the same function signature. One perfect example of this is the window.open function. When you are using non-Microsoft browsers such as Firefox and Chrome, you are able to make a call something like this window.open(url, 'window name', 'dimensions or other settings');. The window name parameter is important because it allows you to open multiple links in the same external window/tab. However, when using Internet Explorer, especially Internet Explorer 8 and older, you can only use window.open(url);. If you try to use the first type of function call, you get a very ambiguous error message in the browser that doesn’t tend to show exactly where the error occurred.

#internet-explorer #javascript #chrome
Read More