Skip to content

[web] Fix multi-view sizing race condition (Minimum size approach) - #185698

Closed
mdebbar wants to merge 1 commit into
flutter:masterfrom
mdebbar:multiview_min_size
Closed

mdebbar wants to merge 1 commit into
flutter:masterfrom
mdebbar:multiview_min_size

Conversation

@mdebbar

@mdebbar mdebbar commented Apr 28, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR fixes the multi-view sizing regression (#185034) by optimizing how the shared OffscreenCanvas is managed. Instead of resizing the canvas for every view, we allow it to grow to the maximum required size and use createImageBitmap cropping to extract the correct region for each view.

Design

  1. Shared Growing Surface: I updated OffscreenCanvasRasterizer to maintain a single surface that uses a new setMinimumSize method. This prevents unnecessary shrinking and re-initialization of the WebGL context.
  2. Sub-region Extraction: OffscreenSurface.rasterizeToImageBitmaps now accepts an optional size.
    • In CanvasKit, we use the native createImageBitmap bounds parameters.
    • In Skwasm, we extract the bitmap from Wasm and then perform a JS-side crop if the dimensions don't match.
  3. Synchronization: A lock is used to ensure that View A's content is snapshotted before View B begins drawing on the same shared canvas.
  4. API Optimization: I refactored the createImageBitmap wrapper in dom.dart to use named parameters, improving readability and avoiding record allocations on every frame.

Pros:

  • Context Efficiency: Maintains a single WebGL context, ensuring the app won't hit browser-imposed context limits (crucial for apps with many
    views).
  • Reduced Overhead: Surface only grows, avoiding the expensive "stop-the-world" cost of recreating Skia surfaces and WebGL contexts when switching
    between views of different sizes.
  • Deterministic Sizing: Guarantees that each view gets a bitmap of the exact size it requested, regardless of the size of the shared canvas.

Cons:

  • Serialization: Views are rendered sequentially due to the shared canvas. While faster than Approach 1, it still doesn't support true parallel
    rendering across views.
  • Cropping Cost: Adds a small overhead for the createImageBitmap cropping operation, though this is generally highly optimized by browsers.

Testing

  • Added engine/src/flutter/lib/web_ui/test/ui/multi_view_sizing_test.dart.
  • Verified the fix across canvaskit and skwasm renderers.

@flutter-dashboard flutter-dashboard Bot added the CICD Run CI/CD label Apr 28, 2026
@github-actions github-actions Bot added engine flutter/engine related. See also e: labels. platform-web Web applications specifically labels Apr 28, 2026
@Piinks

Piinks commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Greetings from stale PR triage! 👋
Is this change still on your radar?

@mdebbar mdebbar closed this Sep 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CICD Run CI/CD engine flutter/engine related. See also e: labels. platform-web Web applications specifically

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants