Bug 46087 - Element doesn't get animated through -webkit-transition if trying to animate 'visibility' and '-webkit-transform' at the same time.
Summary: Element doesn't get animated through -webkit-transition if trying to animate ...
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh OS X 10.6
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-09-20 07:35 PDT by Andrey Okonetchnikov
Modified: 2017-01-06 11:08 PST (History)
6 users (show)

See Also:


Attachments
Testcase HTML (+JS+CSS) for visibility/transform problem. (5.53 KB, text/html)
2012-03-16 14:02 PDT, jeff ozvold
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Andrey Okonetchnikov 2010-09-20 07:35:37 PDT
"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.
Comment 1 Simon Fraser (smfr) 2010-12-06 10:52:51 PST
Testcase?
Comment 2 Andrey Okonetchnikov 2010-12-07 01:31:53 PST
CSS

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

Then apply .invisible to a div on your page.
Comment 3 Simon Fraser (smfr) 2010-12-07 08:32:29 PST
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?
Comment 4 Andrey Okonetchnikov 2010-12-07 09:15:10 PST
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.
Comment 5 Simon Fraser (smfr) 2010-12-07 09:16:52 PST
Maybe related to bug 29984.
Comment 6 Andrey Okonetchnikov 2010-12-07 09:24:56 PST
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.
Comment 7 Andrey Okonetchnikov 2010-12-07 09:29:14 PST
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);
  }
Comment 8 Chris Marrin 2010-12-07 09:48:59 PST
(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?
Comment 9 Andrey Okonetchnikov 2010-12-07 09:50:59 PST
Let's replace the 'translate' with 'scale' and you get the problem with accessing other element beneath the overlay if it's not hidden.
Comment 10 jeff ozvold 2012-03-16 13:05:57 PDT
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
Comment 11 Simon Fraser (smfr) 2012-03-16 13:13:05 PDT
Andrey's test cases disappeared (which is why testcases should always be attached to bugs).
Comment 12 jeff ozvold 2012-03-16 14:02:15 PDT
Created attachment 132372 [details]
Testcase HTML (+JS+CSS) for visibility/transform problem.

I am attaching the contents of the fiddle per Simon's comment.
Comment 13 mh_nichts 2017-01-06 02:21:02 PST
Is there any update about this bug ?
Comment 14 Simon Fraser (smfr) 2017-01-06 11:08:01 PST
The attached test case does work if I copy it to a file and fix the bad line endings.
Comment 15 Simon Fraser (smfr) 2017-01-06 11:08:54 PST
http://jsfiddle.net/JPbWE/4/ also works. Can you try in a recent Safari Tech Preview?