Safari – 34% + 33% + 33% doesn’t equal 100%

[iknowdavehouse]

Anyone worked out what to do with this problem?

Works in Chrome / Firefox but not in Safari (or mobile Safari)

http://cdpn.io/tpIGF

[chrisburton]

Use `33.3%` for the width.

http://codepen.io/chrisburton/pen/EgdJf

[Kitty Giraudel]

Works like a charm on Safari 5.1.7 on Windows XP.

[Paulie_D]

Seems to be OK in Safai 5.1.7 on W7 too

http://codepen.io/seraphzz/full/FzmLn

[iknowdavehouse]

Very strange…I’m still seeing a 1-3px white line on the far right on all of the above examples on my work computer (safari 6.0.4) and at home (the last safari you can get for Snow Leopard).

As I say it doesn’t do it in FF or Chrome. It’s more noticeable on iPhone which is slightly frustrating.

[Paulie_D]

Perhaps Safari 6 has issues with sub-pixels?

Obviously those of us with Win machines can’t test.

[chrisburton]

White is removed on the right side if you change the width from `33.3%` to `33.333%`

[iknowdavehouse]

Not for me…I’ve tried so many combinations.

Are you on Safari 6 on OSX? If it was just this computer it would be different but both my iMac and Macbook and iPhone are all showing the problem. The 34% on the first one was my attempt at making a whole number after truing 33.3 / 33.33 / 33.33333 etc

[chrisburton]

Can you take a screenshot?

[iknowdavehouse]

Yep – I’ve set them all to 33.333% and make the body blue so it’s more obvious.

http://postimg.org/image/58lzh4bf5/

[Paulie_D]

Hmmm…actually, I can see it now in Safari 5 in W7

http://codepen.io/Paulie-D/pen/Blhpz

Weird.

[iknowdavehouse]

Yep!

I can get round it (kinda) by wrapping it in a 100% div, applying the background colour of the last link to the background colour of the div. However, then I end up with a hover issue if I want to change the colour.

[chrisburton]

I think it’s one of those little details that we spend too much time over. I wouldn’t worry about it.

However, you can try something like this: http://codepen.io/chrisburton/pen/bkzjm

Update: I didn’t refresh the page to see your answer but, yes, exactly what I was thinking.

[ElijahFowler]

[This](http://codepen.io/ElijahFowler/pen/fEnlB “”) might help. Instead of telling the browser what width the elements need to be, you can let the browser decide the width through [calc()](http://caniuse.com/#feat=calc ""). I don’t have Safari on my machines (for the most part my clients don’t care about Safari, but as a general rule it looks the same as Chrome, except for terrible font rendering.) so I couldn’t test it, but check it out, hopefully it’ll fix the issue.

[Merri]

@ElijahFowler: your solution brings nothing new to the table as far as solving the issue in Safari (and Opera 12 btw!) goes.

@iknowdavehouse: The problem is that Safari and Opera do not account for subpixel rendering and instead take 33.333%, calculate the full rounded down pixel value for it and throw that same width to each element. And then render goes wrong, because for 101px container 33px + 33px + 33px does not equal 101px. When you give 33.333% in most other browsers the rendering engine doesn’t make each element the same exact pixel width. Instead some are slightly wider (by 1px) if need be.

As far as solving the problem goes: http://codepen.io/Merri/pen/GwnbH

What we do here is to set the red background to the container and not use a background color in the middle element. Then we also use zero size font the get rid of the white space problem between the elements, and also to allow us to use another trick: `text-align: justify;` and a 100% width pseudo element. This makes the left element to stay in left, the middle element to center and the right element to align right. This may leave a gap between the elements (1px max I think) so that is also why the background color for one of the elements is controlled from the container.

[Author]

Posts