Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

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

Merged
auto-submit merged 4 commits into from
Aug 5, 2022
Merged

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

auto-submit merged 4 commits into from
Aug 5, 2022

Conversation

@fatduckling
Copy link
Contributor

@fatduckling fatduckling commented May 30, 2022 •
edited by yjbanov
Loading

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

A comment by @HeinrichJanzing said:

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 flutter-dashboard bot added the platform-web Code specifically for the web engine label May 30, 2022
@fatduckling fatduckling marked this pull request as ready for review May 30, 2022 08:15
@flutter-dashboard
Copy link

flutter-dashboard bot commented May 30, 2022

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.

@fatduckling fatduckling mentioned this pull request May 30, 2022
Closed
@yjbanov yjbanov self-requested a review June 9, 2022 18:25
@yjbanov
Copy link
Contributor

yjbanov commented Jun 30, 2022

Is there a way to test this?

@jgoyvaerts
Copy link

jgoyvaerts commented Jul 7, 2022

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
Copy link
Contributor

yjbanov commented Jul 11, 2022

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.

fatduckling and others added 2 commits August 4, 2022 17:18
@fatduckling @yjbanov
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
@yjbanov
[web] fix CanvasKit canvas translation when DPR changes
f06b0a3
yjbanov
yjbanov approved these changes Aug 5, 2022
View reviewed changes
Copy link
Contributor

@yjbanov yjbanov left a comment

Choose a reason for hiding this comment

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

I added some tests to this PR. LGTM.
lgtm

@yjbanov yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 5, 2022
@auto-submit
Copy link
Contributor

auto-submit bot commented Aug 5, 2022

  • 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 auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Aug 5, 2022
@auto-submit
Copy link
Contributor

auto-submit bot commented Aug 5, 2022

Validations Fail.

ditman
ditman approved these changes Aug 5, 2022
View reviewed changes
Copy link
Member

@ditman ditman left a comment

Choose a reason for hiding this comment

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

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

@yjbanov
Copy link
Contributor

yjbanov commented Aug 5, 2022

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

Yes, but we forgot to call _translateCanvas in one location

@yjbanov yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 5, 2022
@auto-submit
Copy link
Contributor

auto-submit bot commented Aug 5, 2022

  • The status or check suite Linux 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 Aug 5, 2022
@huycozy huycozy mentioned this pull request Aug 5, 2022
Open
@fatduckling
Copy link
Contributor Author

fatduckling commented Aug 5, 2022

Thanks so much @yjbanov for adding the unit test coverage

@yjbanov yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 5, 2022
@auto-submit auto-submit bot merged commit 4780caa into flutter:main Aug 5, 2022
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Aug 5, 2022
Merged
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Aug 5, 2022
@engine-flutter-autoroll
4780caa Fix flutter#77084: flutter website doesn't resize properly wh…
1f8255a 
…en zoomed in/ou… (flutter/engine#33695)
emilyabest pushed a commit to emilyabest/engine that referenced this pull request Aug 12, 2022
@fatduckling @emilyabest
Fix #77084: flutter website doesn't resize properly when zoomed in/ou… (
c943fff 
flutter#33695)
@selmaskopljakovic
Copy link

selmaskopljakovic commented Nov 20, 2023

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
Copy link

HeinrichJanzing commented Nov 21, 2023

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
Copy link

selmaskopljakovic commented Nov 21, 2023

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
Copy link

QinGuiCheng commented Dec 7, 2023

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

@elliette elliette mentioned this pull request Jan 30, 2025
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

2 more reviewers

@yjbanov yjbanov yjbanov approved these changes

@ditman ditman ditman approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

autosubmit Merge PR when tree becomes green via auto submit App needs tests platform-web Code specifically for the web engine

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

7 participants

@fatduckling @yjbanov @jgoyvaerts @selmaskopljakovic @HeinrichJanzing @QinGuiCheng @ditman