8qidzw
Last Updated: February 25, 2016
·
740
· guido

CSS render errors, keep on testing!

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:

Picture

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

Picture

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:

Picture

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;
}

So, what's the point of all this? There's still a lot of bugs like these out there that have been existent since the first versions of these browsers. Even though we now have "modern" browsers, that doesn't mean you don't have to test on each and every one of them you can get your hands on.