Grow your CSS skills. Land your dream job.

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

  • # May 24, 2013 at 8:42 am

    Anyone worked out what to do with this problem?

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

    http://cdpn.io/tpIGF

    # May 24, 2013 at 8:57 am

    Use `33.3%` for the width.

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

    # May 24, 2013 at 9:20 am

    Works like a charm on Safari 5.1.7 on Windows XP.

    # May 24, 2013 at 9:52 am

    Seems to be OK in Safai 5.1.7 on W7 too

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

    # 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:17 am

    Perhaps Safari 6 has issues with sub-pixels?

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

    # May 24, 2013 at 11:40 am

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

    # 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 11:47 am

    Can you take a screenshot?

    # May 24, 2013 at 12:01 pm

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

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

    # May 24, 2013 at 12:17 pm

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

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

    Weird.

    # May 24, 2013 at 12:26 pm

    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.

    # 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.

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".