According to caniuse.com, for those browsers that support both CSS transition and CSS transform, combinatorically there are at least three different types:
- Those that require the
-webkit-prefix on bothtransitionandtransform(e.g. Safari 6, Android browser < 4.4). - Those that only require the
-webkit-prefix ontransform(e.g. Chrome 3x). - 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?