how do new browsers deal with Sub-Pixel Problems in CSS?

user_1599560 0
Viewed 119

There is this old article by John Resig from 2008 in which he describes how browsers of old dealt with problems of sub-pixel rendering. For example if you have 4 floated divs, each with a width of 25%, contained within a parent div of width 50px, how wide are each of the divs? Since mathematically each of those divs is 12.5px wide and there is no such thing as 0.5 pixel some browsers round it down to 12px some round it up to 13px or mixture of both.

Does anybody knows how today, 13 years after, modern browsers deal with this problem?

css
1 Answers

It's highly dependent on the hardware, the browser and the operating system. Just today I was fixing a reported issue that a line looks thicker than the exact same line on different menu item reported by a customer using a Windows machine. On my Mac with my retina screen it still looks perfect. The reason was the thickness. It was 0.5px and it was enough for people to notice it.

I also encountered bugs where flex items were not fitting in a row because of errors in subpixels rounding. It's 2021 and yes, it is still not safe to use it. Ignore at all cost, round it or ceil it but never use a fraction of a pixel in CSS.

user_4978280
Related