Please round off pixel sizes to the nearest integers. Fractional/decimal sizes cause inconsistencies. Thanks.
Wednesday, March 05, 2014 at 5:03 PM EST
Thanks for the suggestion. Where has this caused an issue? Is it specific to a browser? Can you share an example?
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.
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.
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.
You can increase the decimal places on the column width like 33.33333333%
Unfortunatelly the SASS compiler trims at 5 maximum digits, although chrome seemes to have some rounding differences with 5 or 6 digit
Create an Account
Get up to speed FAST, learn straight from the experts who built Foundation.
Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.
Or if you prefer, contact the Foundation Team at [email protected] or (408) 341-0600 x635