On Mac, Chrome will use '-webkit-transform' over 'transform' if both are present.

[joeytwiddle]

I just wanted to share this, in case others meet the same issue.

Our elements have values set for various prefixed and non-prefixed CSS properties (set on the element.style.) For example:

element.style['-webkit-transform'] = "scale(2.0)";
element.style['-moz-transform'] = "scale(2.0)";
element.style['transform'] = "scale(2.0)";

When the polyfill starts to interpolate a value, it will only set the transform property because that was the property it detected was available when it ran detectFeatures(). However, when both properties are present, it appears Chrome (36) will actually take the value of -webkit-transform to transform the element, and not the value of transform. As a result, the animation does not appear in Chrome, because Chrome is reading the un-animated property!

[joeytwiddle]

I cannot reproduce this issue on Linux. I think I must have had something else wrong at the time it happened. (Perhaps it was Mac-specific.)

Closing this issue now, will re-open with more specifics if I see it again.

[joeytwiddle]

OK yes it is specific to Mac. Observed in Chrome 36.0.1985.125.

I note there is already a related TODO in the code:

  // TODO: Remove prefixed properties if the unprefixed version is also
  // supported and present.

For now I am moving webkitTransform to the top of the list like this.

An alternative solution for web developers would be to simply remove (or not set) the prefixes if they are not needed for the current browser.