IE: дочерний элемент теряет анимацию, когда родитель временно скрыт

После скрытия и отображения родительского элемента дочерний элемент больше не вращается (теряет анимацию css3).

Удаление анимации родительских элементов и выполнение hide/show не вызовет такой же проблемы (проблема возникает, когда родительский элемент также имеет анимацию)

Я тестировал в IE 11. Это известная проблема?

Вот фрагмент кода codenen (скопирован ниже) http://codepen.io/agirma/pen/byIEd

/*-------- CSS start ---------*/
@-webkit-keyframes show_content {
 from {
 -webkit-transform: scale(0);
 opacity:0;
 transform: scale(0);
 opacity:0;
 }
 to {
 -webkit-transform: scale(1);
 opacity:1;
 transform: scale(1);
 opacity:1;
 }
}
@keyframes show_content {
 from {
 -webkit-transform: scale(0);
 opacity:0;
 transform: scale(0);
 opacity:0;
 }
 to {
 -webkit-transform: scale(1);
 opacity:1;
 transform: scale(1);
 opacity:1;
 }
}
@-webkit-keyframes rotate_content {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
@keyframes rotate_content {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
#parent {
 display:block;
 background:gray;
 width: 100px;
 height: 100px;
 padding: 20px;
 -webkit-animation: show_content 4s;
 -ms-animation: show_content 4s;
 amimation: show_content 4s;
}
#child {
 display:block;
 width:80px;
 height: 80px;
 border:solid 1px red;
 -webkit-animation: rotate_content 1s linear infinite;
 -ms-animation: rotate_content 1s linear infinite;
 amimation: rotate_content 1s linear infinite;
}
/*------------CSS end----------*/
<div id="parent">
 
</div>
<button onclick="toggleVisibility()">toggle display</button>
1 ответ

Я не считаю, что эта проблема "известна". Я нашел это сам пару недель назад, когда IE-тестирование webapp я строю. Я, наконец, добрался до сегодняшнего дня, и, заметив те же условия для появления, которые вы указали, я решил представить отчет об ошибке для IE. Я как раз собирался это сделать, когда нашел этот вопрос.

Мой отчет об ошибке:https://connect.microsoft.com/IE/feedbackdetail/view/941104/ie-11-bug-with-nested-css-animations-upon-display-of-previously-hidden-parent

Update: Ошибка была успешно воспроизведена инженерами Microsoft и будет исследована.

licensed under cc by-sa 3.0 with attribution.