Chrome32 Update Causes Website Visual Issues

The latest Chrome version, 32, brings a new set of changes to users and developers. In addition to the Chrome OS look and feel modifications, Google has also altered the way the scrollTop property is calculated. Prior to Chrome 32 the document.body.scrollTop returned 0. This is caused by the Doctype in standard mode. More information on this is available in threads similar to this one. However in quirks mode, in order to maintain backward compatibility with older browsers, all browser returns a value different than 0(zero) when the scrollbar is moved. With the latest changes in place, Chrome 32 behaves like it is always in quirks mode.

In order to test this, we can easily build a small page. In this html page, add the following code:

<div id='testEl' style="width: 150px; height: 550px;" onclick="test();">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <input type='button' value='Get scrollTop' onclick='test();' />
<script type="text/javascript">

function test() {
  alert( "document.compatMode:" + document.compatMode +
    "\n Doc ScrollTop: " + document.documentElement.scrollTop +
    "\n Body ScrollTop: " + document.body.scrollTop);
  }
</script>
</div>

When you scroll the page and press the button the result will be following:

In Firefox:

In IE11 we get:

And in Chrome32:

How did we find about this? While working on the ShieldUI menu component, where we use some absolute positioning. After the automatic update of the Chrome browser to version 32 our menu looked different because of its position calculation. How we fix the problem? Just checked if the document.body.scrollTop is set to 0(zero) and got the documentElement’s scrollTop instead of body.scrollTop:

ourElement.style.top = (document.body.scrollTop) ? document.body.scrollTop : document.documentElement.scrollTop;