Safari – 34% + 33% + 33% doesn’t equal 100%
# May 24, 2013 at 11:12 am
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.# May 24, 2013 at 11:46 am
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# May 24, 2013 at 12:39 pm
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.# May 24, 2013 at 1:14 pm
[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.# May 24, 2013 at 1:31 pm
@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.
You must be logged in to reply to this topic.