Mistake in CSS transition detection

[filamentgroup]

Mistake in CSS transition detection

[aarongustafson]

I addressed this in an earlier pull request. I don't think it's in yet.

On Friday, September 7, 2012 at 7:42 AM, Magnus Holm wrote:

"-ms-transition" in document.documentElement.style returns false, not undefined in IE9, so the script thinks that IE9 supports CSS transitions.
This is what causes #19 (#19).

—
Reply to this email directly or view it on GitHub (#25).

[judofyr]

Link? This is broken in so many ways that I'm surprised no-one has noticed it:

Here's the code:

var prefixes = " -webkit- -moz- -o- -ms- ".split( " " ),
    supported = false;

while( prefixes.length ){
  if( prefixes.shift() + "transition" in document.documentElement.style !== undefined ){
    supported = true;
  }
}
return supported;

1. Why not just use return true inside the loop instead of using a temporary variabel?
2. The "in" operator always returns either true/false. It can never be undefined. This means that the condition will always be true.
3. CSS attributes are JSified, so "-moz-transition" in document.documentElement.style is false in all browser. "MozTransition" on the other hand…

Here's a working version:

var prefixes = " Webkit Moz O ms ".split( " " );
while (prefixes.length) {
  if (prefixes.shift() + "Transition" in document.documentElement.style) return true;
}
return false;

[aarongustafson]

I have 2:

easy-designs@1ff143d

and

easy-designs@a2b25df

[judofyr]

Well, 1ff143d disables CSS3 transitions in Firefox, Opera and IE versions that actually support CSS3 transitions.

[aarongustafson]

I just tested against FF15 without any issues and had previously tested it in the others. I will double check it again today while I am working on the code.

[aarongustafson]

Updated code for the test has been added to my pull request.

[jefflembeck]

No longer applicable, thank you!