Bug 265038 - Canvas rendering is janky
Summary: Canvas rendering is janky
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar, Performance
Depends on:
Blocks:
 
Reported: 2023-11-17 07:35 PST by Ashley Gullen
Modified: 2023-11-20 18:21 PST (History)
4 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Ashley Gullen 2023-11-17 07:35:20 PST 
We make Construct, a web game engine (www.construct.net).

Using the latest Safari 17.1 on macOS Sonoma 14.1.1 with an M1 MacBook Pro, it seems canvas games rendering with WebGL and scheduled with requestAnimationFrame look janky. Here are two demos, the first using standard HTMLCanvasElement and the second using OffscreenCanvas in a web worker:

https://downloads.scirra.com/labs/flyingalong-dom/
https://downloads.scirra.com/labs/flyingalong-worker/

In both cases simply hold a touch/mouse button to move the player up.

Both cases should scroll perfectly smoothly (it is light content so the system should not be under any serious load). Both Chrome and Firefox can render it nice and smoothly. However both cases look janky with irregular frame scheduling in Safari only. Safari should be able to achieve the same smooth rendering that Chrome and Firefox can on the same system.
Comment 1 Radar WebKit Bug Importer 2023-11-19 18:16:57 PST 
<rdar://problem/118632792>