A Quick Fix for A Common Pixel Rounding Error

Why do my ::before and ::after elements keep disappearing?

On my latest project, I was steamrolling through my rough pass of CSS to meet a tight deadline, so I was a few hundred lines past styling a section header before I realized…where the heck are my before and after elements?? Upon working with my dev tools, I realized that they had a footprint on the page, but were only visible at smaller screen sizes.

In this picture, you can see that the double underline flourish under my heading is visible at a screen width of 920px.

But in this picture, they COMPLETELY disappear with a screen size of 960px and above! Whaaaat?

I can almost hear your first question…problem with media queries? Nope! So far this is just a static design!

Just like any web developer knows, the first step to solving a problem is understanding what the issue really is. So. What are pixel rounding errors do you ask? Well, to be honest I had to do a little research into the topic myself, but with a little help from a few sources on the internet (find the links below), I found a good jumping off point.

Think about how we developers structure interfaces on the web nowadays. We want our users to have a consistent experience on our sites, no matter what device or screen size they are viewing the site on. Which, for us developers, means more fluid percentage-based layouts instead of declaring hard pixel values. However, relying on the browser to decide how many pixels a certain percentage width is, and also allowing for the multitude of viewport sizes across the industry, means that eventually the browser will have to decided to round a fraction of a pixel either up or down, and we can’t predict which way this will be.

While perhaps losing or adding only a pixel of width may not even be noticeable in most cases, in some very finely-tuned designs, a one-pixel difference turns into a glaring design flaw!

Ok, now back to my problem! Have a look at my CSS below for these flourishes. As you can see below, I have added one flourish as a before element, and one as an after element. They both are only one pixel in height, have different widths, and are given a background colour to make them visible. And using position absolute and some positioning, they are anchored in place underneath the heading.

They look good! Until you resize the screen, that is.

It took a little trial and error, but for a quick fix for this particular problem, have a look at my updated CSS!

Did you see what I did there? I increased the height of each pseudo element to three pixels instead of just one, and added a coloured border-top in order to get the desired effect! It seems that giving the before and after elements more than just a one pixel margin of error has helped correct the issue!

Well, at least in this case. As you all know, web development is a world of trial and error!

Thanks to the Palantir Blog and John Resig’s Blog for helping me understand a bit more about pixel rounding!

Happy coding!