 Search In
• More options...
Find results that contain...
Find results in...

## Recommended Posts

When I tween 1 color to another, using rgba, it's alpha value gets set to a 6 decimal number, not a 2 decimal number that I specified. Example:

I specify a tween to this color:  rgba(0, 0, 0, 0.38)

the color that actual gets set:   rgba(0, 0, 0, 0.380392)

This causes a problem when I'm comparing colors in IF statements.

Does anyone know who to stop this from happening?

##### Share on other sites

It might be a floating point issue like this...

```var value = 0.1 + 0.2; // 0.30000000000000004
```

Here's some helper functions you can use...

```var num1 = 0.38;
var num2 = 0.380392;

// Round the value
var value1 = (num1 === roundTo(num2, 2)) // true

// Check if it's within a tolerance
var value2 = within(num1, num2, 0.001) // true

function roundTo(value, place = 0, base = 10) {
var p = Math.pow(base, place);
return Math.round(value * p) / p;
}

function within(a, b, tolerance = 0.0001) {
return Math.abs(a -  <= tolerance;
}
```
• 3
##### Share on other sites

You can also use toFixed(2) also..  since the first 2 decimal places are what you want

```var value = 0.380392;
var RGBalpha = value.toFixed(2); // converts 0.380392 to 0.38
```

Resource: • 3
##### Share on other sites

You have to be careful about using toFixed because it returns a string.

```var num1 = 0.38;
var num2 = 0.380392;

num1 === num2.toFixed(2); // False
num1 == num2.toFixed(2); // True
```
• 3
##### Share on other sites

As far as I can tell, this issue is unrelated to GSAP. Remove GSAP from the equation, and simply run this:

`document.getElementById("yourID").style.color = "rgba(0, 0, 0, 0.38)"; //Chrome changes it to rgba(0, 0, 0, 0.380392)`

Check the dev tools and you'll see that Chrome changed it to rgba(0, 0, 0, 0.380392).

When I ran my tests, GSAP was indeed setting it to the correct value.

For what it's worth, I'd recommend being very careful about writing logic that depends on numbers matching exactly like that - it can come back to bite you. Computers notoriously suffer from tiny rounding problems. If you must use conditional logic that way, round things before the comparison. But typically it's best to use variables for logic like that. For example, if you're trying to see if the animation of that value is done, just check the tween's progress() or use an onComplete. If you want to track the state of something, use a variable like isOpen or isOpaque or whatever, and manually set it to true/false. But maybe you're working with a case that couldn't be solved like that. I just figured I'd toss in my 2 cents (keep the change).

• 4
##### Share on other sites

Here is a StackOverflow article that goes over exactly what Jack mentioned above regarding Chromes returning a value with more decimal places other than 2.

http://stackoverflow.com/questions/30479757/chrome-slightly-changes-alpha-value-of-rgba-color-after-setting-it/30545414#30545414

Looks like it either might be a bug in Chromes calculation in the RGBA color conversion or Chrome is right and the W3C spec might be wrong.

Since Firefox and IE report only 2 decimal places for RGB alpha.

But either way good catch Jack! • 2