safari rounding down on subpixel calculations

Question

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?

Answer 1

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.

Answer 2

These days you could use flexbox (pure CSS) to handle this.

From the source linked above:

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Answer 3

I've recently encountered this issue using the whilst using the Bootstrap framework. After trawling the net I found this link http://cruft.io/posts/percentage-calculations-in-ie/ and did some device testing. iOS7 Safari seems to round down to the nearest whole number, whilst iOS8 (Which has subpixel rendering on by default) seems to round up slightly to a max. of 15 decimal places. This also seems to be the same on OSX 10.10 (Yosemite)

As Nils K mentions in his/her answer, either use a pixel width layout, or try to adapt the layout to make sure it's wide/narrow enough to fit a whole pixel into the space