Html 如果溢出为'；在a'；位置：相对'；div，在DOM（Chrome）中播放动画时

我发现一些意想不到的行为，当我的应用程序中其他地方的加载指示器可见时，应用程序中的随机内容会消失

我设法将HTML压缩成一个最小的可复制示例

可视化是在一个

react虚拟化自动大小调整器

中，它最终将其内容与CSS放在一个div中：

  overflow: visible;
  height: 0px;
  width: 0px;

它还注入

位置：相对。如果不满足这些条件中的任何一个，则显示fine（良好）。类似地，如果旋转div上的
动画
不存在，则显示良好

仅当所有这些条件（DOM树中的动画、溢出中的内容：可见
position:relative
div中的div）都无法渲染时：



.制作动画{
动画：旋转4s无限线性；
宽度：40px；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
.亲戚{
位置：相对位置；
高度：20px；
}
.溢出{
溢出：可见；
高度：0px；
宽度：0px；
}
动画
下面应该有可见的“文本”
文本
上面应该有可见的“文本”
如果子div也是position:relative，则它似乎可以工作。默认位置是静态的

另外，如果将-webkit transform:translateZ（0）添加到溢出元素，则它会正确渲染：




.制作动画{
动画：旋转4s无限线性；
宽度：40px；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
.亲戚{
位置：相对位置；
高度：20px；
}
.溢出{
溢出：可见；
高度：0px；
宽度：0px；
}
动画
下面应该有可见的“文本”
文本
上面应该有可见的“文本”
渲染器正在优化元素，因为它没有大小。如果你做任何事情给它一个区域，它会显示出来。高度或宽度为1px即可。边框或填充1px也可以。这比我目前的工作方法（设置
宽度：1px！重要
）要好。谢谢