Safari不重绘css动画之上的元素

Safari不重绘CSS动画之上的元素是指在Safari浏览器中，当一个元素上方有正在进行的CSS动画时，该元素不会被重绘。这意味着即使该元素的内容发生了变化，例如文本内容更新或者样式变化，它也不会立即显示出来，直到CSS动画完成或者被暂停。

这种行为是由于Safari浏览器的渲染机制所导致的。为了提高性能和流畅度，Safari会对页面进行优化，避免不必要的重绘。因此，在CSS动画之上的元素不会被重新绘制，以减少渲染的工作量。

然而，如果你希望在Safari中实现CSS动画之上元素的重绘，可以尝试以下方法：

1. 使用will-change属性：将要进行动画的元素的will-change属性设置为transform、opacity等，可以告诉浏览器该元素将要发生变化，从而触发重绘。
2. 使用transform属性：在进行CSS动画时，尽量使用transform属性来实现动画效果，而不是使用top、left等属性。因为transform属性可以触发硬件加速，提高动画性能，并且可以避免元素不重绘的问题。
3. 使用requestAnimationFrame方法：使用requestAnimationFrame方法来执行动画，这样可以确保动画在每一帧之间进行重绘，避免元素不重绘的问题。

总结起来，Safari不重绘CSS动画之上的元素是一种浏览器的优化机制，为了提高性能而采取的策略。如果需要在Safari中实现CSS动画之上元素的重绘，可以尝试使用will-change属性、transform属性或者requestAnimationFrame方法来解决。