| Summary: | Occasional stutter when running simple accelerated css animation | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Dan Fabulich <dan> |
| Component: | Compositing | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | ap, graouts, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 13 | ||
| Hardware: | Mac | ||
| OS: | macOS 10.15 | ||
See also this Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=1049248 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? |
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); } }