Browser-specific prefixes with a CSS transition on transform

Viewed 12254

According to caniuse.com, for those browsers that support both CSS transition and CSS transform, combinatorically there are at least three different types:

  1. Those that require the -webkit- prefix on both transition and transform (e.g. Safari 6, Android browser < 4.4).
  2. Those that only require the -webkit- prefix on transform (e.g. Chrome 3x).
  3. Those that require prefixes on neither (e.g. FF and IE10/11).

How can I safely write my transition styles so that they are parsed correctly in each type? I see two options:

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms, transform 300ms;

or

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms;
        transition: transform 300ms;

Now because of type 2 and type 3 browsers I need to have a prefix-less transition for both -webkit-transform and transform. The problem with the first option is I worry that type 2 and type 3 browsers will not be able to parse the second line, since they will always contain an unrecognized property. The question is, how do browsers handle invalid properties inside a transition--ignore the entire transition style or just skip the invalid property?

I thought this may be mitigated by separating it into two properties so that if one is not parseable it will just be ignored. Apart from this second option being a bit verbose, I still wonder if, in the case of type 2 browsers, the third transition will be unparseable and "reset" the transition back to null.

Any ideas how these perform, generally? Also, which of these are future-compliant for when Chrome et al. switch from -webkit-transform to the prefix-less transform?

2 Answers
Related