i have a container that takes up 829px on a row, and has a background-image of the same size.
i have a div within that container that calculates its width based on the 829px container. on safari, the divs width comes out to be something like 173.8px, but since safari/webkit round down, its truncated and becomes 173px in width.
this 829px container has 3 divs inline on the same row. the first div, 1px is lost, the second, 2px is lost, and by the third, 3 pixels are lost, so the third div is shifted left by three pixels. on an ipad, thats 6 pixels lost.
i've tried to search for subpixel rendering problems, and ive read john resigs article and some other SO questions but i couldnt find a solution.
on google, i found an article: http://www.pixafy.com/blog/2013/05/css-subpixel-rendering/#more-310 i tried to apply it to my situation, but i cannot get away with not setting a width thats calculated on the containers 829px.
what can i do?
There isn't a whole lot you can do about how different browsers render subpixels, sadly. It'd be great if we could choose how the rounding should be handled through CSS, but nope.
Simply using pixels rather then percentages would solve the problem but that's obviously not what you want. I guess you could get around with static pixels if you change the values (possible to a percentage value) through media queries.
Whenever I find myself in a similar scenario I float the last child to the right. A few additional pixels between the last and second last elements don't usually hurt as much as a few additional pixels between the last element and its parent.