Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Safari – 34% + 33% + 33% doesn’t equal 100%

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #45067
    iknowdavehouse
    Participant

    Anyone worked out what to do with this problem?

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

    http://cdpn.io/tpIGF

    #136331
    chrisburton
    Participant

    Use `33.3%` for the width.

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

    #136333
    Kitty Giraudel
    Participant

    Works like a charm on Safari 5.1.7 on Windows XP.

    #136338
    Paulie_D
    Member

    Seems to be OK in Safai 5.1.7 on W7 too

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

    #136346
    iknowdavehouse
    Participant

    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.

    #136347
    Paulie_D
    Member

    Perhaps Safari 6 has issues with sub-pixels?

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

    #136351
    chrisburton
    Participant

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

    #136353
    iknowdavehouse
    Participant

    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

    #136354
    chrisburton
    Participant

    Can you take a screenshot?

    #136356
    iknowdavehouse
    Participant

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

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

    #136358
    Paulie_D
    Member

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

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

    Weird.

    #136361
    iknowdavehouse
    Participant

    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.

    #136364
    chrisburton
    Participant

    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.

    #136366
    ElijahFowler
    Participant

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

    #136367
    Merri
    Participant

    @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)
  • The forum ‘CSS’ is closed to new topics and replies.