CODEWITHSUNDEEP
javascriptcss
HerrWalter
HerrWalter

Reputation: 632

CSS float versus Javascript float

I know it might be early, but I'm pretty confused right now.. I'm setting an rgba a color in CSS

#body{ color: rgba( 100,100,100,0.3 ) }

When I ask Javascript to give me the computed style of this element, I get this:

window.getComputedStyle(document.body)['color']
//rgba(100, 100, 100, 0.298039)

Where I'm expecting rgba(100,100,100,0.3).

My question: Why?

How is this possible and how do I work around this?

Upvotes: 1

Views: 139

Answers (2)

Barmar
Barmar

Reputation: 781058

All the fields of an rgba() specification appear to be converted internally to 8-bit bytes. 0.3 becomes round(0.3 * 255) = 76. When this is converted back to rgba format, it calculates 76/255 = 0.298039. Because it's not stored as decimal or floating point, it loses precision during this process -- there's no way for it to know what the original setting was.

There's no difference in the actual appearance of the display, because the internal 8-bit alpha is what's actually used when rendering.

Upvotes: 8

jfriend00
jfriend00

Reputation: 707396

Floating point in most languages including javascript is not exact. Many numbers such as 0.3 cannot be represented precisely given the way floating point numbers are stored. If you want to compare two floating point numbers, the typical way it is done is to round them to a couple decimal places before comparison and any differences will disappear in the rounding.

Also, since there is no visible difference between small values of opacity (beyond perhaps two decimal places), the browser may be using even fewer bits to store the opacity, thus resulting in even less precision than a normal javascript floating point value.

If you have reason to store an exact value and have that exact value preserved, then convert the number to a string and store the string in a custom property on the object. The property will preserve the string value exactly. If you convert that string back to a float, you will still have to live with the limitations of floating point accuracy, but it should be much more accurate than you've seen with the opacity value.

Since there's no visible difference between an opacity of 0.3 and 0.298039, can you describe what the problem really is?

Upvotes: 3

Related Questions