transition: transform bug about autoprefixer.github.io

[JonathanDoelan]

@ai I never said that autoprefixer produces the all. What I've tried to tell you is, that SAFARI interprets values, that Safari doesn’t know, at this position as all. The output is valid, yes. But SAFARI interprets every value, like -moz-transform or -any-thing-else etc. as all. Which doesn’t make sense, of course. But if you’ve ever built a website with CSS, then you’ll probably have recognized that there are huge differences in how different browsers interpret CSS. So what I wanted to tell you is, that I have proved that the following code produces an unwished behavior in Safari:

-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
-o-transition: -o-transform 1s;
-moz-transition: transform 1s, -moz-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s;

… while this works the right way:

/* autoprefixer: off */
-webkit-transition: -webkit-transform 1s;
-o-transition: -o-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;

You can check it at any time! (Of course, with Safari): https://jsfiddle.net/6zsf2ezm/

Fact is: Safari doesn't know what to do with this line:
transition: transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s;
Because Safari doesn’t know … -moz-transform 1s, -o-transform 1s; and will obviously interpret it as … all 1s, all 1s;

How shall your app be improved if you trust 5M quiet users and ignore 1 voice that delivers you an evidence for this — of course — VERY SPECIFIC issue?

/* autoprefixer off */ is the best feature for this case! (If any other of the 5M runs into this problem someday in the future)

[ymatuhin]

ping @ai

[ai]

@JonathanDoelan why browsers will interpret it like transition: all 1s;?

[JonathanDoelan]

@ai This https://jsfiddle.net/6zsf2ezm/ shows the wrong behaviour … IN SAFARI ! I'm sorry, I didn’t mention that before. I also found out, that Safari interprets transition: someThingThatDoesNotExist 2s; or anything else that doesn’t exist as "transition: all 2s" — you can see that here: https://jsfiddle.net/2486LtLw/ … so, please go for the simpler syntax! It is even more logical and more understandable. And it does work on Safari. THX!

[ai]

it is not a Autoprefixer issue. Maybe Safari have problem or CSS build tool.

[JonathanDoelan]

@ai are you sure?

There is a buggy behavior in Safari that is caused by Autoprefixer. Autoprefixer produces the code (code that doesn’t make sense by the way) that is responsible for the buggy behaviour.

So why isn’t it an Autoprefixer issue?

[ai]

Because there is no all in Autoprefixer output. And all output lines is valid CSS.

(BTW, your output his not future safe, current output is result of few months discussion).

[JonathanDoelan]

OK, i will give up. But this won't change anything. The issue still exists.

[ai]

Did you try to find where all come? Maybe it came from other CSS rule, by selector mistake. Maybe you have other tool in build process (CSS minificator could create problem).

Look there is no other issues about it in Autoprefixer tracker. It mean that no one from 5M users saw this problem.

[ai]

When we created this transition behaviour we were sure, that Safari ignores transition with unknown properties.

I tested your jsfiddle in Safari and both blocks have not animation.

Again, if Safari interprets unknown properties as all we saw many issue in postcss/autoprefixer .tracker. But only your Safari have this problem.

[JonathanDoelan]

It is Safari 10.1 on macOS 10.12.4.
Why should only "my Safari" do this?

But you are right: with Safari 10.0.2 on macOS 10.12.2 the behavior doesn't occur. That's weird.

Do you have the ability to test with Safari 10.1 on macOS 10.12.4?
Maybe with browserstack.com or anything similiar?

Would it be a problem for other browsers or cases to swap the last to lines?
Like:
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
-o-transition: -o-transform 1s;
-moz-transition: transform 1s, -moz-transform 1s;
transition: transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s;
transition: transform 1s;

That would solve the issue …

[ai]

It is Safari regression, you should report it to Apple and they will fix issue.

[JonathanDoelan]

Well… No. It’s not my responsibility and if I'm honest, I'm already tired of it … I just wanted to report an annoying bug …