4

After a css3 transition being done, a callback makes the inner elements to be visible (using universal selector and opacity property).

In the following case, they stay invisible from the screen. The strangest thing is that when using the console and "inspect the element", they magically appear.

http://jsfiddle.net/tT84s/12/

This bug happens on Chrome 19.0.1084.52 but not on Safari 5.1.5

I'm suspecting a rendering bug, some internal browser triggers which doesn't fire or something like that.

4
  • So when I click the button once, the red border flys out, then I need to click it again for the content to come out. Are you trying to have the transition and the visibility both fire at the same time? May 29, 2012 at 14:33
  • Since the text won't scale the size of the box, I'd like to have it appear after the red box has finished it's transition. the needed steps are : 1/ red box goes to 100% height and width 2/ the end of the transition is caught, and launch the next one 3/ inner text appears It seems to works, but the content stays hidden until the element is inspected through the console. It's even selectable with the mouse but still invisible.
    – challet
    May 29, 2012 at 14:37
  • This in interesting - it works on Firefox too, so I guess it's most likely a bug in Google Chrome.
    – Christoph
    May 29, 2012 at 14:41
  • I guess so. A bug issue has been filled code.google.com/p/chromium/issues/detail?id=130081
    – challet
    May 29, 2012 at 15:07

2 Answers 2

1

-webkit-backface-visibility: hidden

Webkit Bug. Try using the code above, it may help with your problem. Also you might want to use transform: scale() instead of width and height.

0

Try http://jsfiddle.net/tT84s/13/

Shaking the DOM seems to work. In this fiddle, I re-append the transitioning element's children (in the same order they were originally positioned). It seems to work in the fiddle - though some solutions mentioned here didn't work for our specific experience of this bug.

Generally speaking, it looks like forcing a DOM change works. Note, however that inserting and removing a <div> had no effect. Go figure! Good luck, and everyone please try to post your working solutions for this or related fiddles/bug-demonstrations. For example, this may work with simply adding and removing the last child - to avoid doing more appendChild actions than necessary.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.