Performance impact of floating point values for CSS proprties

Question

Are there any know issues, where the use of floating point values for CSS properties, has any performance impact on the rendering performance. Especially on mobile devices?

In my case we set the width of the border with JavaScript, and it seems to take longer on iPhone4 when we use floating point values.

Answer 1

I'd say no, there should not be a problem. At least if this tests what I think it does:

http://jsperf.com/float-css-props

Answer 2

If it's a matter of percentage in CSS width property, then the floating point values are respected, and, of course there is a minor performance degradation, but this depends strongly on browser itself. The pixels in for example width property are rounded, but it's not defined whether they actually round to nearest, floor or ceiling number. When using fractional (floating) pixel values for width, however, IE9 and FF4 seem to round to the nearest pixel, while Opera 11, Chrome and Safari truncate the decimal places.

Even when the CSS width number is rounded when the page is painted, the full value is preserved in memory and used for subsequent child calculation. For example, if your div box of 100.4999px paints to 100px, it's child with a width of 50% will be calculated as .5*100.4999 instead of .5*100. And so on to deeper levels.

In deeply nested grid layout systems where parents widths are em, and children are %, and including up to four decimal points upstream had a noticeable impact.