Safari leaves a space on the right side with 100% width grid

Question

I'm trying to make my own grid which does fit al my needs but I can't find a way to make it the full width at Safari (Mac & iOS). It works nicely in other browsers (Chrome, Firefox, IE10) but in Safari and Safari mobile it leaves a space on the right side.

Are there any solutions for this? I'm a pixel perfectionist so this frustrates me so much.

Image preview:

Demo: http://codepen.io/PatrickVerwoerd/pen/wImcu

Answer 1

This is a sub-pixel rounding error. It's common in any fluid layout, but becomes most obvious when you do the same math over and over (12 equal columns in a row). When you have a fluid layout, there are times when your container (as measured in pixels) doesn't divide evenly by the % you set. Say the viewport is 966px wide, and your columns are 10%. That means each column should be 96.6px wide. Browsers just don't know what to do with that partial pixel. If you resize your container, you'll see that the layout jumps now and then, and lines up exactly right when the container is evenly divisible.

It's an old problem, and browsers have mostly been getting better at handling it. IE used to round up, which caused even worse layout problems. Now, most browsers are smarter about it, but Safari still rounds down.

There's no way to fix the problem entirely. There are no pixel-exact, fluid, floated layouts, but there are several work-arounds. I start with the simplest, and work my way through the list:

1. When possible, avoid repetitive percentages. Any one element will only ever round down a partial pixel, meaning you never have more than 1px error at a time. If you don't stack the errors, they are easier to hide.

2. Float the last item in a row to the right. That moves the rounding error in-between columns, where it is generally less noticeable.

3. If you really can't minimize or hide the errors, in a gallery-style layout for example, try Jon Albin Wilkins' float isolation method. It's a bulky approach, so I don't recommend it everywhere, but it can be real helpful in some cases. Layout systems like Susy and Singularity will also give you that as an option.

With a combination of those techniques, you can keep all your rounding errors to a single pixel. If your designs can't handle a single pixel rounding error, you shouldn't use fluid floats, or you should maybe consider the Dao. :)

Answer 2

The issue is that SCSS in the CodePen is calculating the margin and width to a certain decimal level.

/* Actual Math */
53px / 966px * 100 // = 5.486542443%

/* Codepen Math */
53px / 966px * 100 // = 5.48654%

As you can see the remaining decimals are ignored and therefore your grid is technically not adding up to 100% and therefore a space at the end.

It seems the other browsers are compensating for that by assuming you mean to extend the full 100% whereas Safari is being more accurate (whether that's the correct appraoch will depend on what you're trying to achieve).