CSS render errors, keep on testing!

#css

#firefox

#browser

#error

#padding

#render

#modern

The other day I was creating a layout that was only targeted at modern browsers. Oh the joys of being allowed to use box-sizing: border-box; and everything else! Until I ran into something that blew my mind.

Lets take some simple html:

<div class="container">
  <div class="content"></div>
</div>

And some simple CSS:

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 50px;
}

.content {
  height: 150%;
  background: #ff0000;
}

What do you think this does in your usual modern browser? Exactly. You get a nice container, being the full width & height of your browser. Inside that you get a content element that is dynamically sized, and has a spacing of 50px around the whole element because of the padding generated by the container. It should look something like this:

That's perfectly fine. So, what happens when you scroll all the way down? This:

That's perfectly fine as well. But what happens when you try to do this on the latest release of Firefox on Windows or Mac OS X? This:

What the F***? It appears that Firefox still is unable to get something as basic as padding calculation down properly on dynamically sized elements. This issue was found to be reproducible on Windows and OS X, on versions 21 & 22. I haven't had time to test this on other browsers. But it just baffled me too much that a modern browser like Firefox still has a basic rendering error like that.

And the solution you ask? Apply the bottom-padding from the container as bottom-margin to the content instead. (We're leaving the content styling unchanged)

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 50px 50px 0;
}

.container :last-child {
  margin-bottom: 50px;
}