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); } }
See also this Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=1049248
<rdar://problem/59199169>
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.
Me neither.
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?