Fix #77084: flutter website doesn't resize properly when zoomed in/ou… by fatduckling · Pull Request #33695 · flutter-team-archive/engine

fatduckling · 2022-05-30T08:14:53Z

This is a continuation of issue #77084 as the fix done there is only a partial fix.

Interestingly, as @linxuebin1990 noticed, size.width and size.height often suffer from precision issues, making them subtly different, causing this path to not be taken as often as expected. When it is taken, the devicePixelRatio change is detected, the logical size of the canvas is updated to match, but the canvas' translation, intended to compensate for the canvas being oversized, isn't updated. This translation is expressed in logical pixels and thus should also be updated.

If this doesn't happen, it causes the Flutter UI to appear shifted vertically in the browser's viewport. This can be reproduced in any Flutter web app by using Ctrl+mousewheel to change the zoom level. Sooner or later it pops up. Luckily, changing the zoom level again or resizing the window does trigger the call to _translateCanvas() and fixes things.

This ticket aims to fix this issue.

Fixes flutter/flutter#77084

If you had to change anything in the flutter/tests repo, include a link to the migration guide as per the breaking change policy.

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
I listed at least one issue that this PR fixes in the description above.
I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test-exempt. See testing the engine for instructions on
writing and running engine tests.
I updated/added relevant documentation (doc comments with ///).
I signed the CLA.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

flutter-dashboard · 2022-05-30T08:15:12Z

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat (don't just cc him here, he won't see it! He's on Discord!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

yjbanov · 2022-06-30T17:54:15Z

Is there a way to test this?

jgoyvaerts · 2022-07-07T12:08:15Z

Is there a way to test this?

Create a sample flutter app, run it in web, then zoom out or in several times and you will see the broken behavior

yjbanov · 2022-07-11T17:45:16Z

Sorry, what I meant is we should add a unit-test for it. Check out how this test tweaks device-pixel ratio to test some of the functionality. In fact, maybe this can be tested as part of that test by adding the necessary conditions and/or checks.

…t and resizing window on desktop -_translateCanvas() isn't called after zooming in browser

yjbanov

I added some tests to this PR. LGTM.

auto-submit · 2022-08-05T00:21:04Z

Please get at least one approved review if you are already a member or two member reviews if you are not a member before re-applying this label. Reviewers: If you left a comment approving, please use the "approve" review action instead.

auto-submit · 2022-08-05T00:21:06Z

Validations Fail.

ditman

Looks sensible (and familiar! hadn't we landed a fix like this earlier?)

yjbanov · 2022-08-05T02:47:48Z

Looks sensible (and familiar! hadn't we landed a fix like this earlier?)

Yes, but we forgot to call _translateCanvas in one location

auto-submit · 2022-08-05T03:44:04Z

The status or check suite Linux Unopt has failed. Please fix the issues identified (or deflake) before re-applying this label.

fatduckling · 2022-08-05T16:22:44Z

Thanks so much @yjbanov for adding the unit test coverage

…en zoomed in/ou… (flutter-team-archive/engine#33695)

flutter-team-archive#33695)

selmaskopljakovic · 2023-11-20T21:52:39Z

Hi,
I'm still facing this issue with Flutter 3.16, browser Chrome zoom in/out.
Is there some kind of override, or a quick fix before it is released?

HeinrichJanzing · 2023-11-21T07:56:55Z

Hi, I'm still facing this issue with Flutter 3.16, browser Chrome zoom in/out. Is there some kind of override, or a quick fix before it is released?

I believe this engine fix was released as part of Flutter 3.7 already. If you are having an issue with browser zoom it's likely a different/new one. For me browser zoom works fine (for example, in the Flutter gallery). Exception being that since 3.10 you can no longer zoom with Ctrl+mousewheel (that's issue #129933).

selmaskopljakovic · 2023-11-21T12:30:00Z

Hi, I'm still facing this issue with Flutter 3.16, browser Chrome zoom in/out. Is there some kind of override, or a quick fix before it is released?

I believe this engine fix was released as part of Flutter 3.7 already. If you are having an issue with browser zoom it's likely a different/new one. For me browser zoom works fine (for example, in the Flutter gallery). Exception being that since 3.10 you can no longer zoom with Ctrl+mousewheel (that's issue #129933).

I'm using "HTML" rendering not "canvaskit", Canvaskit is working well. Why "HTML" rendering - browser zooming is not working well?

QinGuiCheng · 2023-12-07T01:21:25Z

I'm using "HTML" rendering not "canvaskit", Canvaskit is working well. Why "HTML" rendering - browser zooming is not working well?

flutter-dashboard Bot added the platform-web Code specifically for the web engine label May 30, 2022

fatduckling marked this pull request as ready for review May 30, 2022 08:15

flutter-dashboard Bot added the needs tests label May 30, 2022

fatduckling mentioned this pull request May 30, 2022

[web] flutter website doesn't resize properly when zoomed in/out and resizing window on desktop flutter/flutter#77084

Closed

yjbanov self-requested a review June 9, 2022 18:25

fatduckling and others added 2 commits August 4, 2022 17:18

Fix #77084: flutter website doesn't resize properly when zoomed in/ou…

b9c5a62

…t and resizing window on desktop -_translateCanvas() isn't called after zooming in browser

[web] fix CanvasKit canvas translation when DPR changes

f06b0a3

yjbanov force-pushed the main branch from 64965c7 to f06b0a3 Compare August 5, 2022 00:19

yjbanov approved these changes Aug 5, 2022

View reviewed changes

yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 5, 2022

auto-submit Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Aug 5, 2022

ditman approved these changes Aug 5, 2022

View reviewed changes

firefox workaround

777bbc5

yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 5, 2022

auto-submit Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Aug 5, 2022

huycozy mentioned this pull request Aug 5, 2022

CanvasKit CPU rendering is incorrectly cropped flutter/flutter#108983

Open

format

949f920

yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 5, 2022

auto-submit Bot merged commit 4780caa into flutter-team-archive:main Aug 5, 2022

engine-flutter-autoroll mentioned this pull request Aug 5, 2022

Roll Flutter Engine from 021ee4e16c82 to 4780caad406f (1 revision) flutter/flutter#109069

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Aug 5, 2022

4780caa Fix flutter#77084: flutter website doesn't resize properly wh…

1f8255a

…en zoomed in/ou… (flutter-team-archive/engine#33695)

emilyabest pushed a commit to emilyabest/engine that referenced this pull request Aug 12, 2022

Fix #77084: flutter website doesn't resize properly when zoomed in/ou… (

c943fff

flutter-team-archive#33695)

elliette mentioned this pull request Jan 30, 2025

Sidebar sizes - icons and font - are way too big flutter/devtools#8243

Closed

Conversation

fatduckling commented May 30, 2022 • edited by yjbanov Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

flutter-dashboard Bot commented May 30, 2022

Uh oh!

yjbanov commented Jun 30, 2022

Uh oh!

jgoyvaerts commented Jul 7, 2022

Uh oh!

yjbanov commented Jul 11, 2022

Uh oh!

yjbanov left a comment

Choose a reason for hiding this comment

Uh oh!

auto-submit Bot commented Aug 5, 2022

Uh oh!

auto-submit Bot commented Aug 5, 2022

Uh oh!

ditman left a comment

Choose a reason for hiding this comment

Uh oh!

yjbanov commented Aug 5, 2022

Uh oh!

auto-submit Bot commented Aug 5, 2022

Uh oh!

fatduckling commented Aug 5, 2022

Uh oh!

selmaskopljakovic commented Nov 20, 2023

Uh oh!

HeinrichJanzing commented Nov 21, 2023

Uh oh!

selmaskopljakovic commented Nov 21, 2023

Uh oh!

QinGuiCheng commented Dec 7, 2023

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

7 participants

fatduckling commented May 30, 2022 •

edited by yjbanov

Loading