Why aren’t CSS colors the same? `in-browser` and `cross-browser`

March 15th, 2012

When you set backgroundcolor of the body to hsla(20,30%,50%,.5), what do you expect as output when you read it out with javascript?

The same result in every browser?
Wrong!

The same  in a particular browser ?
Wrong!

The same in a particular browser  indifferent to the color model (rgba or hsla)?
Wrong again! Only Firefox does it right.

Chromium 17: body { background-color: rgba(166, 115, 89, 0.496094); } 

Opera 11.61: body { background-color: rgba(166, 115, 89, 0.5059) } 

Firefox 10.02: body { background-color: rgba(165, 114, 89, 0.5); }

Example

Setting and reading out the color value a 100 times doesn’t change the color in the end, so it seems a result of the javascript floating-point arithmic quirk without any serious implications.

One Response to “Why aren’t CSS colors the same? `in-browser` and `cross-browser`”

  1. How to manipulate styles with javascript - dev.webonomic.nl Says:

    […] dev.webonomic.nl What's up? « Why aren’t CSS colors the same? `in-browser` and `cross-browser` […]