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.
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
So while those percentages can get closer than using 33.333% it still doesn’t solve the problem.
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…
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".