Grow your CSS skills. Land your dream job.

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

  • # May 24, 2013 at 1:43 pm

    Thanks, I’ll have a look at that. My original query of why a 34% + 2x 33% panels can confuse a browser as they are whole numbers.

    It’s forgivable on Safari desktop but it’s more apparent on iPhone.

    Thanks

    # May 24, 2013 at 1:51 pm

    Just for some additional info, using full percentages doesn’t change the problem with rounding to full pixels. Say we use the same 101px container example:

    – 101 * 0.34 = 34.34 = 34px
    – 101 * 0.33 = 34.33 = 33px
    – 34 + 33 + 33 = 100px

    Or 102px container:

    – 102 * 0.34 = 34.68 = 34px
    – 102 * 0.33 = 33.66 = 33px
    – 35 + 34 + 34 = 100px

    Proof: http://codepen.io/Merri/pen/cCBzg

    So while those percentages can get closer than using 33.333% it still doesn’t solve the problem.

    # May 24, 2013 at 2:13 pm

    Thanks for the detailed response / explanation. The site I’m actually working on has quite a lot of additional styles to factor in but I can certainly use a couple of the suggested methods.

    Generally I was just surprised this was happening and wondered if I was doing something wrong…

    Thanks again

Viewing 3 posts - 16 through 18 (of 18 total)

You must be logged in to reply to this topic.

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