By LocalPCGuy on CSS, Web Development

Internet Explorer 9 & 10 CSS bug with overflow-y?

I ran into an interesting problem, maybe a bug, in Internet Explorer 10 (and IE9) today.  Basically, if I had the following styles applied to the HTML tag, and then collapsed sections of the page with JavaScript, the height of the page would not collapse along with the content, ending up with significant white space left at the bottom of the document after collapsing large page sections.  Removing either of the styles fixed the problem, but the combination didn’t work properly.

html { 
    height: 100%;
    overflow-y: scroll;
}

I tried various combinations of styles to fix it, but in the end I had to remove the overflow-y style with JavaScript before expanding or collapsing content, and then reapplying it after the animation is complete.   As the problem didn’t affect standard’s compliant non-IE browsers, I added a class during animation and only applied the style to remove the overflow-y property to IE9 and IE10.

Why those styles?

In case anyone was wondering why I had that combination of styles on the HTML tag, it happens because when I want to pin a footer to the bottom of the browser window, I’ll use a fairly common “trick” to force the HTML and Body tags of a website to be 100% in height.  Something like this:

<html>
<head>
</head>
<body>
  <div class="wrapper">
    <section class="content"></section>
    <footer></footer>
  </div>
</body>
</html>
html { height: 100%; }
body { height: 100%; }
.wrapper { min-height: 100%; }
.content { padding-bottom: 125px; }
footer { position: absolute; bottom: 0; height: 120px; }

Then, I use the overflow-y property to force the scrollbar on all pages, so that when sections of the page are expanded or collapsed, or even when navigating from page to page, the page content won’t jump horizontally when the height becomes large enough to require a scrollbar.

I don’t really know if this is a bug or just a mis-use of CSS on my part, but the fact that it works correctly in most standard compliant browsers and doesn’t in IE9 or IE10 leads me to believe that those are the browsers that are mis-behaving.

Any thoughts, comments or discussion: @LocalPCGuy