From 5cefaad4a587cce8ca1a216310bb5d9327aa7568 Mon Sep 17 00:00:00 2001 From: Harry Terkelsen <1961493+harryterkelsen@users.noreply.github.com> Date: Thu, 15 Jan 2026 18:26:12 -0800 Subject: [PATCH] Fix bug in multisurfacerenderer where canvases do not have "position: absolute" (#181053) When using MultiSurfaceRasterizer, the on-screen canvases did not have `position: absolute`, causing layout issues when platform views with overlaid content was rendered. Fixes internal bug b/475770800 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord]. **Note**: The Flutter team is currently trialing the use of [Gemini Code Assist for GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code). Comments from the `gemini-code-assist` bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed. [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md --- .../engine/compositing/canvas_provider.dart | 3 +- .../lib/web_ui/lib/src/engine/renderer.dart | 10 ++- .../test/ui/platform_view_position_test.dart | 74 +++++++++++++++++++ 3 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 engine/src/flutter/lib/web_ui/test/ui/platform_view_position_test.dart diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/compositing/canvas_provider.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/compositing/canvas_provider.dart index f48fa59be08..b9f55e0230b 100644 --- a/engine/src/flutter/lib/web_ui/lib/src/engine/compositing/canvas_provider.dart +++ b/engine/src/flutter/lib/web_ui/lib/src/engine/compositing/canvas_provider.dart @@ -105,6 +105,7 @@ class OnscreenCanvasProvider extends CanvasProvider { final cssHeight = '${size.height / ratio}px'; canvas.style ..width = cssWidth - ..height = cssHeight; + ..height = cssHeight + ..position = 'absolute'; } } diff --git a/engine/src/flutter/lib/web_ui/lib/src/engine/renderer.dart b/engine/src/flutter/lib/web_ui/lib/src/engine/renderer.dart index d996582c66d..a64885d2aaf 100644 --- a/engine/src/flutter/lib/web_ui/lib/src/engine/renderer.dart +++ b/engine/src/flutter/lib/web_ui/lib/src/engine/renderer.dart @@ -67,6 +67,10 @@ abstract class Renderer { @mustCallSuper FutureOr initialize() { + _setUpViewListeners(); + } + + void _setUpViewListeners() { // Views may have been registered before this renderer was initialized. // Create rasterizers for them and then start listening for new view // creation/disposal events. @@ -347,8 +351,12 @@ abstract class Renderer { /// Clears the state of this renderer. Used in tests. @mustCallSuper void debugClear() { + _onViewCreatedListener.cancel(); + _onViewDisposedListener.cancel(); for (final ViewRasterizer rasterizer in rasterizers.values) { - rasterizer.debugClear(); + rasterizer.dispose(); } + rasterizers.clear(); + _setUpViewListeners(); } } diff --git a/engine/src/flutter/lib/web_ui/test/ui/platform_view_position_test.dart b/engine/src/flutter/lib/web_ui/test/ui/platform_view_position_test.dart new file mode 100644 index 00000000000..f01ff23e11f --- /dev/null +++ b/engine/src/flutter/lib/web_ui/test/ui/platform_view_position_test.dart @@ -0,0 +1,74 @@ +// Copyright 2013 The Flutter Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'dart:js_interop'; + +import 'package:test/bootstrap/browser.dart'; +import 'package:test/test.dart'; +import 'package:ui/src/engine.dart' as engine; +import 'package:ui/src/engine.dart'; +import 'package:ui/ui.dart' as ui; +import 'package:ui/ui_web/src/ui_web.dart' as ui_web; + +import '../common/rendering.dart'; +import '../common/test_initialization.dart'; +import 'utils.dart'; + +void main() { + internalBootstrapBrowserTest(() => testMain); +} + +Future testMain() async { + setUpUnitTests(withImplicitView: true, setUpTestViewDimensions: false); + + test('Onscreen canvas has position: absolute', () async { + // Force multi-surface mode to ensure OnscreenCanvasProvider is used. + engine.debugOverrideJsConfiguration( + {'canvasKitForceMultiSurfaceRasterizer': true}.jsify() + as engine.JsFlutterConfiguration?, + ); + // Reset the renderer to ensure it is created with the new configuration. + engine.renderer.debugResetRasterizer(); + engine.renderer.debugClear(); + + const platformViewType = 'test-platform-view'; + ui_web.platformViewRegistry.registerViewFactory(platformViewType, (int viewId) { + final DomElement element = createDomHTMLDivElement(); + element.id = 'view-$viewId'; + return element; + }); + + await createPlatformView(0, platformViewType); + + // Create a scene with a platform view and some drawing to trigger canvas creation. + final recorder = ui.PictureRecorder(); + final canvas = ui.Canvas(recorder); + canvas.drawRect( + const ui.Rect.fromLTWH(0, 0, 100, 100), + ui.Paint()..color = const ui.Color(0xFFFF0000), + ); + final ui.Picture picture = recorder.endRecording(); + + final sb = ui.SceneBuilder(); + sb.pushOffset(0, 0); + sb.addPlatformView(0, width: 100, height: 100); + sb.addPicture(ui.Offset.zero, picture); + + await renderScene(sb.build()); + + // Find the canvas element. + final DomElement canvasElement = (implicitView as engine.EngineFlutterView).dom.sceneHost + .querySelectorAll('canvas') + .single; + + // Verify position is absolute. + expect( + canvasElement.style.position, + 'absolute', + reason: 'Canvas should have position: absolute', + ); + + engine.debugOverrideJsConfiguration(null); + }); +}