Menu icon Foundation
Fractional Pixel Sizes

Please round off pixel sizes to the nearest integers. Fractional/decimal sizes cause inconsistencies. Thanks.


Please round off pixel sizes to the nearest integers. Fractional/decimal sizes cause inconsistencies. Thanks.

Rafi Benkual almost 6 years ago

Hi Nick,
Thanks for the suggestion. Where has this caused an issue? Is it specific to a browser? Can you share an example?

Karl Ward almost 6 years ago

I believe this is related to issues with Google Chrome and how it deals with decimal positioning. For example, I noticed myself that sometimes sublevel items were 1px off alignment in the top-bar when aligned right ... I did a lot of research through the inspector though, and found out this occurs because of how Chrome rounds decimal values ... I also found this bug when using plain CSS3 columns in Chrome (none of the other browsers), because it messes around with paddings and margins when interpolating width of elements into decimal values.

Although I am not sure what exactly you are referring to, I don't think this issue is directly related to Foundation.

Nick Roosevelt almost 6 years ago

I' trying to get a submit button and a link to be the same height and appearance. I have gotten them to look the same in some places by adding height values specifically, but then it only works in some places. Under what circumstances is fractional pixels beneficial? I have about 30 years experience in software, and I have never wanted to specify positions on a display in fractional pixels, and I have numerous times rounded them off because it was causing problems. I guess perhaps in the retina world and the idea of resolution independent display technology, this might be somehow useful, but then it seems to me you should not express the unit as pixels. Pixels are fundamentally discrete/integral. Please just don't pretend that they are somehow continuous.

And no, it's not just Google Chrome.

Karl Ward almost 6 years ago

Would be helpful to see an example. You are aware that browsers simply render differences in paddings and margins on micro-level elements like buttons because of differences in how they render the text inside?

I am not sure where you get "fractional pixels" from, but this may be the result of how the CSS is rendered from SASS in conversion perhaps from em or rem.

Rafi Benkual over 5 years ago

You can increase the decimal places on the column width like 33.33333333%

denes dosa about 5 years ago

Unfortunatelly the SASS compiler trims at 5 maximum digits, although chrome seemes to have some rounding differences with 5 or 6 digit