Bug 207282 – Occasional stutter when running simple accelerated css animation

• Status: NEW
• Component: Compositing

[Dan Fabulich]

Visit css-stutter.glitch.me

Expected: Expect the moving box to be perfectly smooth.
Actual: Occasionally a frame is missed

This is a very simple animation that really shouldn't stutter at all. I see occasional missed frames on a 2019 16" MacBook Pro.

div#box {
  background-color: red;
  height: 10vh;
  width: 10vw;
  margin: 10vh 10vw;
  animation-name: slide;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes slide {
  0% { transform: translateX(0); }
  50% { transform: translateX(400px); }
  100% { transform: translateX(0); }
}

[Dan Fabulich]

See also this Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=1049248

[Radar WebKit Bug Importer]

<rdar://problem/59199169>

[Alexey Proskuryakov]

I don't see any glitches on my 2012 MacBook Pro / macOS Mojave / Safari 13.0.5. Although not sure if I can notice a single dropped frame.

[Simon Fraser (smfr)]

Me neither.

[Dan Fabulich]

I see it. Chrome DevTools has a tool that can show the dropped frames; is there a tool I can use to measure dropped frames in Safari?