CODEWITHSUNDEEP
jquerycsscss-transitions
kiwijus
kiwijus

Reputation: 1237

webkit blur transition with positioned elements

I was trying to create a blur/unblur transition when clicking a button.

I have managed to get this working on basic elements, however as soon as I add any kind of positioning to the elements the unblur stops working. I created a jsfiddle to show this http://jsfiddle.net/NLpRy/

I'm currently using 

-webkit-filter: initial;
filter: initial;

to set the initial 'unblurred' state.

Is there a bug with the filters when using positioned elements?

Note: I have tried the following code and although it does work, I can't use it as a solution as it breaks my other animations elsewhere.

-webkit-filter: blur(0);
filter: blur(0);

Upvotes: 2

Views: 430

Answers (1)

vals
vals

Reputation: 64244

Looks like a bug to me, probably will get solved in some future version of the browser.

In the meanwhile, I got it fixed using the 3d trick, transform: translateZ(0px);

.page {
    -webkit-filter: none;
    filter: none;
    position: relative;
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 1.3s ease-out;
    -o-transition: all 1.3s ease-out;
    transition: all 3s ease-out;
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
}

fiddle

Upvotes: 1

Related Questions