javascript - What is the maximum precision of CSS3 opacity? - Stack Overflow

admin管理员组

文章数量:1297091

So I've been just generating opacity for interactive fading.

I think however, that it's not a good idea to use unrounded values for opacity. If the maximum precision is lower than maximum javascript in precision, the browsers seem to round the value, but consider it changed.

So the question is, what is the maximum precision that makes sense for CSS3 opacity?

So I've been just generating opacity for interactive fading.

I think however, that it's not a good idea to use unrounded values for opacity. If the maximum precision is lower than maximum javascript in precision, the browsers seem to round the value, but consider it changed.

So the question is, what is the maximum precision that makes sense for CSS3 opacity?

• javascript
• css

Share Improve this question Follow edited May 24, 2014 at 20:23 Tomáš Zato asked May 24, 2014 at 18:05 Tomáš ZatoTomáš Zato 53.3k6363 gold badges310310 silver badges825825 bronze badges 4

• 5 I have a hunch this is implementation-dependent. – BoltClock Commented May 24, 2014 at 18:11
• I haven't got any specific evidence, but to keep IE playing nice I've always thought of opacity in decimals between 0 and 1 allowing for 11 possibilities, that isn't much but they guarantee a 'change' – David Barker Commented May 24, 2014 at 18:17
• Just tried with Math.random in Chrome, and setting and getting 16 decimal places doesn't seem like it's an issue, I guess the question is more what would be practical, and what can you actually see the difference of ? – adeneo Commented May 24, 2014 at 18:19
• It should also be noted that jQuery uses around 16-17 decimal places -> jsfiddle/pXqdH/2 – adeneo Commented May 24, 2014 at 18:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Opacity allows for basically any number of decimals you'd like, but the issue is that HTML can only ever change its lightness in 256 different ways. So, the most sensitive opacity would be in something black over something white, which would have a visible variety of 256 different hues. This is because the ratio between R, G, and B must always stay the same to maintain the same colour.

So, since the most sensitive colour has 256 different values, the smallest change that would have an effect on the visible output would be 1/256 = 0.00390625. In theory, that should be the minimum step size for increasing your opacity.

I've tested this, and using a simple colour picker I noticed that in this example fiddle, the bottom div was the only one which had any change of colour. The top 2 divs had the colour #000000, and the bottom div had the colour #010101. So, I would say, based on this, that:

1. The entered values are not rounded, or if they are, they are always rounded down (floor function)
2. The maximum sensitivity for opacity is 3 decimals.

It should be noted that this was all tested in Google Chrome, and like BoltClock said, this might vary per implementation.

本文标签： javascriptWhat is the maximum precision of CSS3 opacityStack Overflow