Summary

On MobileSafari with Skwasm, the canvas backing store can be valid (1206 x 2142) while the visible CSS/display size collapses to about 0.328125px. User-visible result: the page is blank or nearly blank even though Skwasm artifacts loaded and benchmark telemetry can complete.

Expected visible size on the tested iPhone is about 402 x 714px.

Fix candidate: #188797.

Current status: local verification of the stock #188797 bundle did not reproduce the collapsed CSS-size signature. The bundle was built without the multi-surface flag and without forced CSS/JavaScript sizing. Physical iPhone MobileSafari loaded skwasm_heavy, main.dart.mjs, and main.dart.wasm; bench_card_infinite_scroll and bench_simple_lazy_text_scroll completed with errors: []; canvas geometry was 1206 x 2142 backing / 402 x 714 CSS.

This issue is only about the MobileSafari canvas CSS-size collapse. Safari/WebKit default enablement is separate.

User Impact

Flutter web pages using Skwasm can appear blank or nearly blank on iPhone MobileSafari even when the app has loaded and the canvas backing store contains content.

Screenshots

Failing state Blank / near-blank page while canvas CSS size is about 0.328125px.

Recovered / fixed state Visible benchmark content with canvas CSS size about 402 x 714px.

Additional visible benchmark states from local MobileSafari follow-up:

Card scroll

Lazy text scroll

Wrapbox scroll

Related PRs

• [web] Repair RenderCanvas CSS size drift #188797: stock RenderCanvas CSS-size repair candidate.
• [web] Add RenderCanvas sizing diagnostics #188724: diagnostic logging draft used during investigation.
• Add opt-in Skwasm multi-surface rasterizer #188628: separate transferred-canvas / multi-surface experiment; not required for the stock [web] Repair RenderCanvas CSS size drift #188797 verification.

Verification for #188797

• Renderer: Skwasm.
• wasmAllowList.webkit=true.
• variants=none.
• No multi-surface flag.
• No forced CSS/JS sizing; variant=none is telemetry-only and does not write canvas CSS.
• Generated bundle/build logs were checked for FLUTTER_WEB_SKWASM_FORCE_MULTI_SURFACE_RASTERIZER; the string was absent.
• Targeted render_canvas_test.dart browser test passed in the [web] Repair RenderCanvas CSS size drift #188797 checkout with --gcs-prod (chrome-dart2js-canvaskit-engine, 3/3, All tests passed!).

Local #188797 runs:

• Simulator MobileSafari, bench_card_infinite_scroll: loaded skwasm_heavy, main.dart.mjs, and main.dart.wasm; errors: []; canvas 1206 x 2142 backing / 402 x 714 CSS.
• Physical iPhone MobileSafari, bench_card_infinite_scroll: loaded the same Skwasm artifacts; errors: []; canvas 1206 x 2142 backing / 402 x 714 CSS.
• Physical iPhone MobileSafari, bench_simple_lazy_text_scroll: loaded the same Skwasm artifacts; errors: []; canvas 1206 x 2142 backing / 402 x 714 CSS.

Physical iPhone caveat: page telemetry reported crossOriginIsolated=false even though the harness served isolation headers. Skwasm still loaded through the WebKit allowlist, so the physical result is local canvas-geometry and benchmark-completion evidence, not a cross-origin-isolation pass.

canvas.style.width = `${canvas.width / window.devicePixelRatio}px`;
canvas.style.height = `${canvas.height / window.devicePixelRatio}px`;