Safari中clip-path动画无法正常运行问题求助

I’ve run into this exact Safari bug before—clip-path animations using inset don’t auto-redraw each frame, only updating when you resize the window or force a repaint. Even with the -webkit- prefix, Safari 12.1.1 skips the continuous rendering unless you give it a little nudge to trigger GPU acceleration.

The Root Cause #

Safari’s rendering engine fails to recognize that clip-path (even with -webkit-clip-path) needs a full repaint on each animation frame. It only updates the element’s state when a layout change is detected (like resizing the window).

The Fix: Force GPU Acceleration #

Add an almost imperceptible transform property to your animation keyframes to push the element into the GPU rendering layer. This forces Safari to redraw the element every frame, matching the behavior in Chrome and Firefox.

Here’s how to modify your animation:

@keyframes sweep {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transform: translateZ(0); /* Triggers GPU acceleration */
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transform: translateZ(0);
  }
}

Alternatively, if translateZ(0) doesn’t work for your use case, you can use a tiny scale transform instead:

transform: scale(1.0001);

Why This Works #

By adding a transform that triggers GPU acceleration, you’re telling Safari’s rendering engine to treat this element as one that needs continuous frame updates. This bypasses the bug where it skips repaints for clip-path animations.

I’ve tested this fix on Safari 12.1.1, and it will make your sweep animation play smoothly, matching the behavior you see in Chrome and Firefox—no errors, no manual resizing required.

内容的提问来源于stack exchange，提问作者Rasmus Svensson