Bug 46087 – Element doesn't get animated through -webkit-transition if trying to animate 'visibility' and '-webkit-transform' at the same time.

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Andrey Okonetchnikov]

"Visibility" CSS property doesn't get animated when using -webkit-transition. As Apple developer reference and alse MDC states, this property should be animated as well.

[Simon Fraser (smfr)]

Testcase?

[Andrey Okonetchnikov]

CSS

div {
visibility: visible;
-webkit-transisiton: visibility 1s;
}
div.invisible {
visibility: hidden
}

Then apply .invisible to a div on your page.

[Simon Fraser (smfr)]

We "animate" visibility by snapping it at the end of the transition; in other words, transition-delay and transition-duration apply to it, but ti doesn't actually do a fade or anything.

What are you expecting to happen?

[Andrey Okonetchnikov]

Okay, I made a test case and it turns out the bug isn't with visibility property rather than with -webkit-transform. So I guess we need to edit the case or merge it with existing one (if any).

Here are 2 examples which shows the problem:

http://okonet.ru/projects/webkit_transitions_testcase/ - this one is trying to animate the opacity, visibility and -webkit-transform properties at the same time

http://okonet.ru/projects/webkit_transitions_testcase/index_notransforms.html - here are just opacity and visibility will be animated. More to say, if you start with the first test case you have to restart browser in order to get the second example working.

This problem doesn't reproducable in Google Chrome (I have tested in Dev branch on Mac) and Firefox (ver 4 latest beta).

Please confirm you can reproduce the problem at your side.

[Simon Fraser (smfr)]

Maybe related to bug 29984.

[Andrey Okonetchnikov]

Not sure they are related. But there is something wrong with animating visibility _and_ -webkit-transform. Should be hardware acceleration of any kind I guess.

Here is the example without visibility. Just opacity and -webkit-transform:

http://okonet.ru/projects/webkit_transitions_testcase/index_novisibility.html

Clearly, it's working quite well.

[Andrey Okonetchnikov]

And I'm using following JS workaround for it: 

resetWebkitTransitions: function(){
    var dummy = document.createElement('DIV');
    dummy.style.position = 'fixed';
    dummy.style.width = '1px';
    dummy.style.height = '1px';
    dummy.style.zIndex = 1;
    dummy.style.webkitTransitionProperty = '-webkit-transform';
    dummy.style.webkitTransitionDuration = '.1s';
    dummy.style.webkitTransform = 'scale(1)';
    Element.insert(document.body, dummy);
    (function(){
      dummy.style.webkitTransform = 'scale(0)';
    }).delay(.1);
    (function(){
      Element.remove(dummy);
    }).delay(.2);
  }

[Chris Marrin]

(In reply to comment #7)
> And I'm using following JS workaround for it: 
> 
> resetWebkitTransitions: function(){
>     var dummy = document.createElement('DIV');
>     dummy.style.position = 'fixed';
>     dummy.style.width = '1px';
>     dummy.style.height = '1px';
>     dummy.style.zIndex = 1;
>     dummy.style.webkitTransitionProperty = '-webkit-transform';
>     dummy.style.webkitTransitionDuration = '.1s';
>     dummy.style.webkitTransform = 'scale(1)';
>     Element.insert(document.body, dummy);
>     (function(){
>       dummy.style.webkitTransform = 'scale(0)';
>     }).delay(.1);
>     (function(){
>       Element.remove(dummy);
>     }).delay(.2);
>   }

There does seem to be a bug here. But I'm confused about why you're trying to change visibility in this particular example. If you're starting an object off-screen with 0 opacity, why would you want to "animate" visibility? Or did you stumble on this bug when doing some other effect?

[Andrey Okonetchnikov]

Let's replace the 'translate' with 'scale' and you get the problem with accessing other element beneath the overlay if it's not hidden.

[jeff ozvold]

Sorry to bump this, but I do have a repro scenario:

http://jsfiddle.net/JPbWE/4/

If 'foo3' is not present, the 'unflip' button does not appear to work. If 'foo3' is present, the 'unflip' button does work.

OS: Windows 8 Consumer Preview (Build 8250)
Bad behavior shows in Safari <= 5.1 (have also seen this on Mac)
Tested on Webkit 534.54.16
Correct behavior shows in Chrome, WK 535.11

[Simon Fraser (smfr)]

Andrey's test cases disappeared (which is why testcases should always be attached to bugs).

[jeff ozvold]

Created attachment 132372 [details]
Testcase HTML (+JS+CSS) for visibility/transform problem.

I am attaching the contents of the fiddle per Simon's comment.

[mh_nichts]

Is there any update about this bug ?

[Simon Fraser (smfr)]

The attached test case does work if I copy it to a file and fix the bad line endings.

[Simon Fraser (smfr)]

http://jsfiddle.net/JPbWE/4/ also works. Can you try in a recent Safari Tech Preview?

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.