CODEWITHSUNDEEP
csscss-transitions
anna.mi
anna.mi

Reputation: 1549

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

It seems that when we change the display property of the parent element of a transitioning child, in webkit the animation on the child stops - and when the display of the element is reverted back, the child styles are displayed as if the transition has finished/the css transition property does not exist.

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

here's a replication of the issue: https://tinker.io/95219/1 animate, then hide show while the rectangle is transitioning. try in firefox and webkit to see the difference

is this a known bug?

Upvotes: 3

Views: 1052

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28505

Using visibility: hidden; instead of display: none; seems to work.

Like so: https://tinker.io/95219/3

.hidden {
    visibility: hidden;
}

If you want to emulate display: none; (i.e. as if the element is indeed completely hidden), you could set the height to zero, like so: https://tinker.io/95219/4 (Had to target #container rather than #parent to achieve this.

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

Upvotes: 3

Related Questions