Internal elements remain invisible after css3 transition

Question

After the css3 transition completes, the callback makes the internal elements visible (using the universal selector and opacity property).

In the following case, they remain invisible from the screen. The strangest thing is that when you use the console and "check the item" they magically appear.

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

This error occurs in Chrome 19.0.1084.52, but not in Safari 5.1.5

I suspect a rendering error, some built-in browser triggers that do not work or something like that.

Answer 1

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

Shaking the DOM seems to work. In this script, I again add the children of the transition element (in the same order in which they were originally located). It seems to work in the violin - although some of the solutions mentioned here did not work for our specific experience of this error.

Generally speaking, this is similar to forcing DOM changes. Note, however, that inserting and deleting the <div> not affected. Go figure! Good luck, and everyone, please try to publish your working solutions for this or related scripts / errors. For example, this can work with simply adding and removing the last child - to avoid additional appendChild actions than necessary.

Answer 2

-webkit-backface-visibility: hidden

Webkit error. Try using the code above, this may help with your problem. You can also use transform: scale() instead of width and height.