Filter transition is not working in Chrome/Opera

[raskam]

transition: filter ease-in-out 1s;

is converted to

transition: -webkit-filter ease-in-out 1s, filter ease-in-out 1s;
transition: filter ease-in-out 1s;

and it seems that the second transition overwrites the first one with -webkit prefix which is needed for Chrome and Opera to work properly.

Example with generated autoprefixer CSS (transition not working):
http://jsfiddle.net/q9fjt04f/

Example with second transtion removed (transition working):
http://jsfiddle.net/6fxfhuu9/

Tested on Chrome 39 + Opera 26.

[ai]

Yeap. We need special hack for this case. As quick hack you can write:

transition: -webkit-filter ease-in-out 1s, filter ease-in-out 1s;

I try to fix it on next week.

[ai]

Fixed ai/autoprefixer-core@c3ad975

[ai]

Released today in 5.1

[dwightjack]

Hi,

i'm having an issue with transition and filter as well.

My stack is:

• SCSS with libsass
• grunt autoprefixer 2.2.0 with autoprefixer core 5.1.3
• task browsers option set at ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1', 'ie 9']

SCSS source:

filter: blur(100px);
transition: filter 2s ease;

CSS output:

  -webkit-filter: blur(100px);
          filter: blur(100px);
  -webkit-transition: -webkit-filter 2s ease, filter 2s ease;
          transition: filter 2s ease;

Am i missing something?

[ai]

Seems like some old webkit becoome more popular and returned to selection.

[dwightjack]

Thanks for the reply,

so how do i have to tweak the browser support to get the right output?

transition: -webkit-filter 2s ease, filter 2s ease;

[ai]

This is a hot fix. Later I try to find some better solution.

[arcanis]

Would it be an acceptable solution to put the -webkit-transition below the unprefixed one in the autoprefixer output?

        transition: filter .3s;
-webkit-transition: -webkit-filter .3s;

[ai]

Nope, because it broke Autoprefixer clean.

var prefixed = autoprefixer.process(origin).css;
var clean     = autoprefixer({ browsers: [] }).process(prefixed).css;
clean == prefixed;

It important for text editor plugins for example. People in text editor can call Autoprefixer twice on same CSS.

[arcanis]

Hm, and using -webkit-filter everywhere filter is used?

-webkit-transition: -webkit-filter .3s;
        transition: filter .3s, -webkit-filter .3s;

The issue is that it breaks transition-* properties, since they don't use the same parameter list anymore : /

[cvn]

I'm still seeing this issue. http://codepen.io/cvn/pen/oXGYBO

I'll use the workaround for now.

[zanona]

Perhaps the issue should be re-opened? The only way to get it working is to use the workaround, but I believe the bug still exists?

[ai]

@zanona what browser exactly you use and what input send to Autoprefixer?

[zanona]

Hey @ai, I am using Safari 8.08 with a similar input as @miroslavraska.

.element {
    transition: filter .3s;
    transition: -webkit-filter .3s, filter .3s; /*work-around*/
}

I hope this helps.

[ai]

Fixed ai/autoprefixer-core@50ea7bb

[yisibl]

We must be support other properties:

input:

.foo {
    transition: filter 2s, backdrop-filter .36s;
}

output:

.foo {
-webkit-transition: -webkit-filter 2s, -webkit-backdrop-filter .36s, filter 2s, backdrop-filter .36s;
        transition: -webkit-filter 2s, -webkit-backdrop-filter .36s, filter 2s, backdrop-filter .36s;
}

[yisibl]

@ai I think there are more similar properties.

[ai]

@yisibl yeap, I think we should use -webkit-filter for every properties.

[yisibl]

Use: safari >= 6

input:

.foo{
  transition: transform 1s;
}

output:

.foo {
  -webkit-transition: transform 1s;
          transition: transform 1s;
}

right?

[ai]

Right :)

[yisibl]

http://jsbin.com/gawijotoqu/edit?html,css,output This is not work in old WebKit.

[ai]

I add transition support for backdrop-filter 9ba1f47

[ai]

I close it, because we have #511