Repository navigation
[web] Avoid absolute positioning for base CanvasKit canvas - #188337
Conversation
There was a problem hiding this comment.
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.
| // canvas needs a display canvas. | ||
| canvas.displayCanvas = rasterizer.getOverlay(); | ||
| } | ||
| canvas.displayCanvas!.setIsOverlay(hasPlatformViews); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Good catch. Updated.
|
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. |
|
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. |
|
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. |
…12169) Manual roll Flutter from 91939cc4db78 to dc2a8703e12b (50 revisions) Manual roll requested by bensonluk@google.com flutter/flutter@91939cc...dc2a870 2026-07-09 chris@bracken.jp [ios,macos] Update swiftc.py flags to match swiftc (flutter/flutter#189174) 2026-07-09 jesswon@google.com [AGP 9] Update Warn Version to AGP 9+ (flutter/flutter#189109) 2026-07-09 154381524+flutteractionsbot@users.noreply.github.com Sync CHANGELOG.md from stable (flutter/flutter#189203) 2026-07-09 mdebbar@google.com [web] Roll Chrome to 145 (framework) (flutter/flutter#182861) 2026-07-09 engine-flutter-autoroll@skia.org Roll Packages from 52d84d6 to 20928d5 (6 revisions) (flutter/flutter#189194) 2026-07-09 zhongliu88889@gmail.com [web] Avoid absolute positioning for base CanvasKit canvas (flutter/flutter#188337) 2026-07-09 engine-flutter-autoroll@skia.org Roll Dart SDK from cdb7217e65aa to a11fb7ed40a5 (6 revisions) (flutter/flutter#189195) 2026-07-09 matt.kosarek@canonical.com Fix dereference of nullptr in the moved-to-rect signal in the Linux embedder (flutter/flutter#189152) 2026-07-09 katelovett@google.com Fix data for design packages (flutter/flutter#189140) 2026-07-09 engine-flutter-autoroll@skia.org Roll Skia from 7b42d1251d54 to ab3a7b98c94d (2 revisions) (flutter/flutter#189181) 2026-07-09 engine-flutter-autoroll@skia.org Roll Skia from 05d9d214e0b7 to 7b42d1251d54 (2 revisions) (flutter/flutter#189175) 2026-07-09 engine-flutter-autoroll@skia.org Roll Skia from 542c8bdd7f4f to 05d9d214e0b7 (4 revisions) (flutter/flutter#189169) 2026-07-09 97480502+b-luk@users.noreply.github.com UberSDF rect handling for thin (line-like) rectangles (flutter/flutter#188821) 2026-07-09 engine-flutter-autoroll@skia.org Roll Skia from dd572c07f63c to 542c8bdd7f4f (4 revisions) (flutter/flutter#189160) 2026-07-09 markzipan@google.com [flutter_tools] Fix hot restart for WASM web builds (flutter/flutter#187898) 2026-07-08 robert.ancell@canonical.com Split FlViewRenderer into OpenGL and software backends (flutter/flutter#188824) 2026-07-08 awolff@google.com Promote android_hardware_smoke_tests out of bringup in CI (flutter/flutter#189081) 2026-07-08 engine-flutter-autoroll@skia.org Roll Skia from 8df24be66531 to dd572c07f63c (4 revisions) (flutter/flutter#189150) 2026-07-08 matt.kosarek@canonical.com Expose LinuxWindowRegistrar on _window_linux.dart in order to better support out of tree LinuxWindowingOwners (flutter/flutter#188917) 2026-07-08 137456488+flutter-pub-roller-bot@users.noreply.github.com Roll pub packages (flutter/flutter#189149) 2026-07-08 codefu@google.com fix(ci): harden some workflows (flutter/flutter#189087) 2026-07-08 engine-flutter-autoroll@skia.org Roll Skia from 51a62da33da0 to 8df24be66531 (1 revision) (flutter/flutter#189139) 2026-07-08 iinozemtsev@google.com Roll Dart SDK to Dart 3.13 beta3 (flutter/flutter#189122) 2026-07-08 digvijaysinghiam@gmail.com [flutter_tools] Don't crash on non-UTF-8 plugin pubspec.yaml (flutter/flutter#188976) 2026-07-08 bkonyi@google.com [flutter_tools] Watch transitive #include headers for FragmentProgram hot reload (flutter/flutter#187945) 2026-07-08 engine-flutter-autoroll@skia.org Roll Skia from 040d9f55de00 to 51a62da33da0 (1 revision) (flutter/flutter#189135) 2026-07-08 engine-flutter-autoroll@skia.org Roll Packages from 92525f5 to 52d84d6 (7 revisions) (flutter/flutter#189134) 2026-07-08 bkonyi@google.com [flutter_tools] Forcefully kill hung subprocesses 5 seconds after timeout (flutter/flutter#187178) 2026-07-08 malo.allee@gmail.com Expose the app's build name and number as compile-time constants (flutter/flutter#187935) 2026-07-08 engine-flutter-autoroll@skia.org Roll Skia from 1ff92f879815 to 040d9f55de00 (1 revision) (flutter/flutter#189131) 2026-07-08 engine-flutter-autoroll@skia.org Roll Skia from 6137414bef5c to 1ff92f879815 (6 revisions) (flutter/flutter#189126) 2026-07-08 brackenavaron@gmail.com [test cross imports] More test/rendering + flutter_test/test fixes (flutter/flutter#188954) 2026-07-08 112751483+shivanshu877@users.noreply.github.com engine: explain why each candidate build was skipped in Flutter web loader (flutter/flutter#186254) 2026-07-08 chris@bracken.jp vscode: add missing unicode.h (flutter/flutter#189102) 2026-07-08 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from 7RjQJBW3m-3Jl-7jr... to QcRFUtvCw2EobfJ8s... (flutter/flutter#189104) 2026-07-08 engine-flutter-autoroll@skia.org Roll Skia from 075fbe4778d9 to 6137414bef5c (10 revisions) (flutter/flutter#189106) 2026-07-08 112751483+shivanshu877@users.noreply.github.com engine: warn on WASM load failure when not crossOriginIsolated (flutter/flutter#186252) 2026-07-08 engine-flutter-autoroll@skia.org Roll Dart SDK from c9bccc09e733 to db2155f56bf3 (2 revisions) (flutter/flutter#189105) 2026-07-08 bkonyi@google.com [flutter_tools] Prevent interactive device selection in machine mode (flutter/flutter#188267) 2026-07-08 bkonyi@google.com [flutter_tools] Fix wireless ADB device discovery when serial contains spaces (flutter/flutter#187943) 2026-07-07 zhongliu88889@gmail.com [web] Fix grouped autofill on iOS Chrome (flutter/flutter#187459) 2026-07-07 rmolivares@renzo-olivares.dev Fix TextSelectionOverlay crash when layout is degenerate (flutter/flutter#188672) 2026-07-07 87962825+kyungilcho@users.noreply.github.com [flutter_tools] Provision Android NDK in the main Gradle invocation (flutter/flutter#186337) 2026-07-07 awolff@google.com Android_hardware_smoke_test: Migrate to AGP 9 (flutter/flutter#189082) ...
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 preservingHtmlElementViewstacking.One limitation: mixed Flutter and
HtmlElementViewscenes may still show iOS WebKit scroll jank because platform-view overlays still requireposition:absolute.Demo
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.