search

web-animations / web-animations-js-legacy

The original emulator of the Web Animations specification. Please use web-animations-js instead:
https://github.com/web-animations/web-animations-js
Apache License 2.0
707 stars 84 forks source link

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

Open joeytwiddle opened 10 years ago

joeytwiddle commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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.