Skip to content

[web] Avoid absolute positioning for base CanvasKit canvas#188337

Merged
auto-submit[bot] merged 9 commits into
flutter:masterfrom
flutter-zl:janky_0617
Jul 9, 2026
Merged

[web] Avoid absolute positioning for base CanvasKit canvas#188337
auto-submit[bot] merged 9 commits into
flutter:masterfrom
flutter-zl:janky_0617

Conversation

@flutter-zl

@flutter-zl flutter-zl commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

fix for #176327
Partial fix for #181511

Problem

With CanvasKit and semantics enabled, scrolling regular Flutter Web content on iPhone WebKit browsers can be very janky. The base CanvasKit canvas was always styled with position:absolute, which is expensive for WebKit to scroll together with the semantics DOM.

Fix

Only platform-view overlay canvases keep position:absolute. The normal base CanvasKit canvas now uses regular positioning, which fixes the plain Flutter scroll case while preserving HtmlElementView stacking.

One limitation: mixed Flutter and HtmlElementView scenes may still show iOS WebKit scroll jank because platform-view overlays still require position:absolute.

Demo

Before After
https://flutter-demo-09-before.web.app https://flutter-demo-09-after.web.app

Steps: open the page on iPhone Chrome or Safari, keep semantics enabled, then scroll the page continuously.

Before: the on-screen jank log shows severe scroll jank, including runs over 100 janky frames per 5 seconds.

After: the same regular Flutter content stays smooth, with low jank summaries around 1 to 10 janky frames per 5 seconds in validation runs.

@flutter-dashboard flutter-dashboard Bot added the CICD Run CI/CD label Jun 22, 2026
@github-actions github-actions Bot added engine flutter/engine related. See also e: labels. platform-web Web applications specifically team-web Owned by Web platform team labels Jun 22, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request modifies the web engine to conditionally apply the position: absolute style to onscreen canvases only when they are used as overlays between platform views, rather than unconditionally styling them. It also adds a unit test to verify this behavior. The reviewer suggested guarding the style updates in setIsOverlay to prevent redundant DOM writes and potential style recalculation overhead.

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/surface.dart
@github-actions github-actions Bot removed the CICD Run CI/CD label Jun 22, 2026
@flutter-zl flutter-zl added the CICD Run CI/CD label Jun 22, 2026
Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/canvaskit/surface.dart
// canvas needs a display canvas.
canvas.displayCanvas = rasterizer.getOverlay();
}
canvas.displayCanvas!.setIsOverlay(hasPlatformViews);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should change the condition for checking if the canvas is an overlay. After all, it's possible (in theory) for a composition to have more than one canvas and no platform views. And also, it's possible for there to be only one canvas even if there are platform views. Maybe instead, we should check if there are multiple canvases in the composition.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. Updated.

@flutter-zl
flutter-zl requested a review from harryterkelsen July 1, 2026 17:48

@harryterkelsen harryterkelsen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@flutter-zl flutter-zl added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 1, 2026
@flutter-zl
flutter-zl removed the request for review from mdebbar July 1, 2026 20:48
@auto-submit

auto-submit Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

autosubmit label was removed for flutter/flutter/188337, because - The status or check suite Mac mac_unopt has failed. Please fix the issues identified (or deflake) before re-applying this label.

@auto-submit auto-submit Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jul 1, 2026
@flutter-zl flutter-zl added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 7, 2026
@auto-submit

auto-submit Bot commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

autosubmit label was removed for flutter/flutter/188337, because - The status or check suite Google testing has failed. Please fix the issues identified (or deflake) before re-applying this label.

@auto-submit auto-submit Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jul 7, 2026
@flutter-zl flutter-zl added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 7, 2026
@auto-submit auto-submit Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jul 8, 2026
@auto-submit

auto-submit Bot commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

autosubmit label was removed for flutter/flutter/188337, because - The status or check suite Google testing has failed. Please fix the issues identified (or deflake) before re-applying this label.

@flutter-zl flutter-zl added the autosubmit Merge PR when tree becomes green via auto submit App label Jul 8, 2026
@auto-submit
auto-submit Bot added this pull request to the merge queue Jul 9, 2026
Merged via the queue into flutter:master with commit 7152f2b Jul 9, 2026
200 checks passed
@flutter-dashboard flutter-dashboard Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jul 9, 2026
auto-submit Bot pushed a commit to flutter/packages that referenced this pull request Jul 10, 2026
…12169)

Manual roll Flutter from 91939cc4db78 to dc2a8703e12b (50 revisions)

Manual roll requested by [email protected]

flutter/flutter@91939cc...dc2a870

2026-07-09 [email protected] [ios,macos] Update swiftc.py flags to match swiftc (flutter/flutter#189174)
2026-07-09 [email protected] [AGP 9] Update Warn Version to AGP 9+ (flutter/flutter#189109)
2026-07-09 [email protected] Sync CHANGELOG.md from stable (flutter/flutter#189203)
2026-07-09 [email protected] [web] Roll Chrome to 145 (framework) (flutter/flutter#182861)
2026-07-09 [email protected] Roll Packages from 52d84d6 to 20928d5 (6 revisions) (flutter/flutter#189194)
2026-07-09 [email protected] [web] Avoid absolute positioning for base CanvasKit canvas (flutter/flutter#188337)
2026-07-09 [email protected] Roll Dart SDK from cdb7217e65aa to a11fb7ed40a5 (6 revisions) (flutter/flutter#189195)
2026-07-09 [email protected] Fix dereference of nullptr in the moved-to-rect signal in the Linux embedder (flutter/flutter#189152)
2026-07-09 [email protected] Fix data for design packages (flutter/flutter#189140)
2026-07-09 [email protected] Roll Skia from 7b42d1251d54 to ab3a7b98c94d (2 revisions) (flutter/flutter#189181)
2026-07-09 [email protected] Roll Skia from 05d9d214e0b7 to 7b42d1251d54 (2 revisions) (flutter/flutter#189175)
2026-07-09 [email protected] Roll Skia from 542c8bdd7f4f to 05d9d214e0b7 (4 revisions) (flutter/flutter#189169)
2026-07-09 [email protected] UberSDF rect handling for thin (line-like) rectangles (flutter/flutter#188821)
2026-07-09 [email protected] Roll Skia from dd572c07f63c to 542c8bdd7f4f (4 revisions) (flutter/flutter#189160)
2026-07-09 [email protected] [flutter_tools] Fix hot restart for WASM web builds (flutter/flutter#187898)
2026-07-08 [email protected] Split FlViewRenderer into OpenGL and software backends (flutter/flutter#188824)
2026-07-08 [email protected] Promote android_hardware_smoke_tests out of bringup in CI (flutter/flutter#189081)
2026-07-08 [email protected] Roll Skia from 8df24be66531 to dd572c07f63c (4 revisions) (flutter/flutter#189150)
2026-07-08 [email protected] Expose LinuxWindowRegistrar on _window_linux.dart in order to better support out of tree LinuxWindowingOwners (flutter/flutter#188917)
2026-07-08 [email protected] Roll pub packages (flutter/flutter#189149)
2026-07-08 [email protected] fix(ci): harden some workflows (flutter/flutter#189087)
2026-07-08 [email protected] Roll Skia from 51a62da33da0 to 8df24be66531 (1 revision) (flutter/flutter#189139)
2026-07-08 [email protected] Roll Dart SDK to Dart 3.13 beta3 (flutter/flutter#189122)
2026-07-08 [email protected] [flutter_tools] Don't crash on non-UTF-8 plugin pubspec.yaml (flutter/flutter#188976)
2026-07-08 [email protected] [flutter_tools] Watch transitive #include headers for FragmentProgram hot reload (flutter/flutter#187945)
2026-07-08 [email protected] Roll Skia from 040d9f55de00 to 51a62da33da0 (1 revision) (flutter/flutter#189135)
2026-07-08 [email protected] Roll Packages from 92525f5 to 52d84d6 (7 revisions) (flutter/flutter#189134)
2026-07-08 [email protected] [flutter_tools] Forcefully kill hung subprocesses 5 seconds after timeout (flutter/flutter#187178)
2026-07-08 [email protected] Expose the app's build name and number as compile-time constants (flutter/flutter#187935)
2026-07-08 [email protected] Roll Skia from 1ff92f879815 to 040d9f55de00 (1 revision) (flutter/flutter#189131)
2026-07-08 [email protected] Roll Skia from 6137414bef5c to 1ff92f879815 (6 revisions) (flutter/flutter#189126)
2026-07-08 [email protected] [test cross imports] More test/rendering + flutter_test/test fixes (flutter/flutter#188954)
2026-07-08 [email protected] engine: explain why each candidate build was skipped in Flutter web loader (flutter/flutter#186254)
2026-07-08 [email protected] vscode: add missing unicode.h (flutter/flutter#189102)
2026-07-08 [email protected] Roll Fuchsia Linux SDK from 7RjQJBW3m-3Jl-7jr... to QcRFUtvCw2EobfJ8s... (flutter/flutter#189104)
2026-07-08 [email protected] Roll Skia from 075fbe4778d9 to 6137414bef5c (10 revisions) (flutter/flutter#189106)
2026-07-08 [email protected] engine: warn on WASM load failure when not crossOriginIsolated (flutter/flutter#186252)
2026-07-08 [email protected] Roll Dart SDK from c9bccc09e733 to db2155f56bf3 (2 revisions) (flutter/flutter#189105)
2026-07-08 [email protected] [flutter_tools] Prevent interactive device selection in machine mode (flutter/flutter#188267)
2026-07-08 [email protected] [flutter_tools] Fix wireless ADB device discovery when serial contains spaces (flutter/flutter#187943)
2026-07-07 [email protected] [web] Fix grouped autofill on iOS Chrome (flutter/flutter#187459)
2026-07-07 [email protected] Fix TextSelectionOverlay crash when layout is degenerate (flutter/flutter#188672)
2026-07-07 [email protected] [flutter_tools] Provision Android NDK in the main Gradle invocation (flutter/flutter#186337)
2026-07-07 [email protected] Android_hardware_smoke_test: Migrate to AGP 9 (flutter/flutter#189082)
...
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 team-web Owned by Web platform team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants