Jump to content
GreenSock

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

decimal points in rgba colors

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?

 

 

Link to comment
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;
}
  • Like 3
Link to comment
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
  • Like 3
Link to comment
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).

  • Like 4
Link to comment
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!

 

:)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×