Chrome updated and now my site looks bad, HELP!

During the week of January 15 2014, Google released version 32 of their Chrome browser.  All users of Chrome receive this update automatically when they restart their browsers after the release happened.  If you are a Chrome browser user, chances are you have this version installed by now.  The browser now looks different and begins to provide some of the Chrome OS look and feel to users of other operating systems.  That is not the only change that Google has made to this browser.

An interesting change was introduced that changes the way the scrollTop property (and similarly with the scrollLeft property) is calculated in the HTML DOM.  This may not seem to be a significant change, but when items are positioned on the browser using absolute positioning, this can significantly change your calculations.

In Internet Explorer, FireFox, and Opera the scrollTop property will return the distance calculated between the top of an element that is showing scrollbars and the top of the content visible to the browser.  This effectively gives you the distance between the top of the element and the top of the content scrolled into view.

The important element that you will typically want to measure this distance on is the HTML body element.  The body element’s scrollTop property in the modern browsers changes based on whether content that you are delivering is in quirks mode or standard mode. 

Quirks mode is defined in the browsers in order to maintain backward compatibility with older browsers and their layout models.  The opposite of quirks mode is standards mode, which all browsers now support and presents a standard layout model for content.  If your content that you are presenting uses the HTML5 doctype, all browsers will present your content in standard mode.  However, if you do NOT use a doctype in your web pages, all browsers will render your content in quirks mode.

Here is where the change comes in.  I wrote the following JavaScript to test the three major desktop browsers calculations:

Listing 1 - JavaScript to Test ScrollTop

Here are the results of those tests in the following two images.  The image on the left shows Chrome, IE, and Firefox in HTML5 standards mode and what they have calculated for the scrollTop value in quirks mode.  The image on the right shows what these browsers have calculated for the scrollTop value in standard mode. 

In quirks mode, you can easily grab the value of scrollTop from the body element and have a safe value.  Internet Explorer 11 does a great job of yielding the same value for documentElement and body, which should be the same value because the documentElement of a page is located at the top of the body element.  In standards mode, both IE and Firefox deprecate the body.scrollTop value, setting it to zero.

Prior to Chrome 32, that browser would also return a zero for the scrollTop value.  Now it returns a value that mimics the behavior of IE11 in quirks mode.  Therefore, our calculations for the scrollTop of an element should looks something more like this:

Listing 2 - Corrected Calculation of ScrollTop

In this way, our browser mode and our browser version will not affect the position of the element.  If there is a calculated scrollTop value on the body element, that will be used.  Otherwise, this method will fall back to the documentElement scrollTop value.

Have you have any problems with new browser versions breaking your web pages?  Are older browsers getting you down with all of the exceptions you need to write into your beautiful HTML5 site?  Let me know in the comments below.