Chrome slightly changed RGBA alpha value after installation

Question

Pay attention to the following snippet:

var el = document.getElementById('x'); el.style.backgroundColor = "rgba(124, 181, 236, 0.25)"; alert(el.style.backgroundColor); 

 <div id="x">Testing</div> 

On Windows 8.1, this returns the exact input for backgroundColor in IE 11 and Firefox 37, but in Chrome 43 it changes the alpha value, and the warning says:

rgba (124, 181, 236, 0.247059)

Note that the alpha value unexpectedly returns 0.247059 instead of 0.25 .

I went through the background-color specification , as well as the rgba specification and more specifically the bit about alpha values , but could not determine if this is an error, or if UA (in this case Chrome) is allowed to do this.

Does any of the relevant specifications comply with Chrome behavior? As a bonus, can anyone explain why Chrome subtly changes the alpha value?

---

Footnote: checking if this is a "setter" ( el.style.backgroundColor = ... ) is to blame. I also tried to declare the style of the element inside the DOM itself. This will have the same (unexpected) result. See this snippet:

 document.addEventListener("DOMContentLoaded", function(event) { var el = document.getElementById('x'); alert(el.style.backgroundColor); }); 

 <div id="x" style="background-color: rgba(124, 181, 236, 0.25);">Testing</div> 

Answer 1

Thought as RGBA is represented in 32 bits. This will mean that in fact then there is no such thing as the exact 0.25 of 8-bit alpha. So 0.247059 is the actual correct extrapolated value. So is chrome wrong? or is it really right? and other browsers give you an invalid number that is not a true real representation of what is displayed on the page?

You can then argue that the W3C standard is not entirely correct and that it should only allow values ​​that can be fully developed using the 8-bit Alpha. But then this is just a recommendation, not a law ...

Below is a stripped-down version of Chromium configured for the webkit color.cpp code that appears to perform color conversions. but then I'm not a chrome specialist http://www.chromium.org/developers/how-tos/getting-around-the-chrome-source-code

Sources: https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/platform/graphics/Color.cpp

 #include <iostream> using namespace std; typedef unsigned RGBA32; int colorFloatToRGBAByte(float f) { return std::max(0, std::min(static_cast<int>(lroundf(255.0f * f)), 255)); } RGBA32 makeRGBA32FromFloats(float r, float g, float b, float a) { cout << "Alpha: " << a; return colorFloatToRGBAByte(a) << 24 | colorFloatToRGBAByte(r) << 16 | colorFloatToRGBAByte(g) << 8 | colorFloatToRGBAByte(b); } int main() { RGBA32 t; t = makeRGBA32FromFloats (255.0f, 255.0f, 255.0f, 0.25f); cout << static_cast<unsigned>(t) << std::endl; return 0; } 

Answer 2

This is a known Chrome issue for quite some time ...

This is due to how Chrome calculates the value of the computed style .

For example, your input alpha value is 0.25 .

• Chrome first converts it to an 8-bit level, 0.25 * 255 = 63.75 .
• What is strange here, the number is truncated to an integer, 63 .
• Chrome then uses the interconnect to return to CSS3 color notation.
  63/255 = 0.24705882352941178 , approximately 0.247059 .

This happens not only when adjusting color using JS, but also in CSS. For instance:

 <style> div { color: rgba(100, 100, 100, 0.3) } <style> <div></div> <script> document.querySelector('div').style.color // rgba(100, 100, 100, 0.298039) </script>