Clever Geek Handbook

Webkit loses transition animation when parent is temporarily hidden with display none

It looks like when we change the display property of the parent of the transition child, in webkit the animation on the child stops - and when the display of the element goes back, the child styles are rendered as if the transition is complete / the transition property css does not exist.

in firefox, the transition continues uninterrupted, as if the element continued the transition, even if the parent (and inner element) was temporarily hidden

here's a replication of the problem: https://tinker.io/95219/1 animate and then hide the show when the rectangle transitions. try in firefox and webkit to see the difference

is this a known bug?

+3


source to share


1 answer


Using visibility: hidden;

instead display: none;

seems to work.

So: https://tinker.io/95219/3

.hidden {
    visibility: hidden;
}


If you want to emulate display: none;

(that is, as if the element is indeed completely hidden), you can set the height to zero, for example: https://tinker.io/95219/4 (to achieve this you need #container

instead #parent

.

#container.hidden {
    visibility: hidden;
    height: 0;
}
+2


source






More articles:


All Articles