"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.
Testcase?
CSS div { visibility: visible; -webkit-transisiton: visibility 1s; } div.invisible { visibility: hidden } Then apply .invisible to a div on your page.
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?
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.
Maybe related to bug 29984.
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.
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); }
(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?
Let's replace the 'translate' with 'scale' and you get the problem with accessing other element beneath the overlay if it's not hidden.
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
Andrey's test cases disappeared (which is why testcases should always be attached to bugs).
Created attachment 132372 [details] Testcase HTML (+JS+CSS) for visibility/transform problem. I am attaching the contents of the fiddle per Simon's comment.
Is there any update about this bug ?
The attached test case does work if I copy it to a file and fix the bad line endings.
http://jsfiddle.net/JPbWE/4/ also works. Can you try in a recent Safari Tech Preview?
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.