[rotation_distortion] Use "delayed swap" solution to reduce rotation distortion #40730

hellohuanlin · 2023-03-28T22:43:41Z

The "size interpolation" solution didn't go well (more context here). Then a new solution came to my mind, and I call it "delayed swap":

In the originally behavior, we swap the width/height immediately before the rotation, resulting in roughly ~4x distortion in the beginning. With "delayed swap" solution, we swap the width/height right in the middle of the rotation (i.e. delay the swap for half of the transition duration).

This new "delayed swap" solution gives us the same benefit as the "snapshot" solution:

reducing ~4x distortion to ~2x
most distorted frames occur in the middle of rotation when it's moving the fastest, making it hard to notice

And it fixes the drawback of "snapshot" solution:

it works well with dynamic content like animation or video
it doesn't have a ~0.5 second penalty when taking the snapshot

Looks pretty good on flutter gallery:

delayed.swap.mp4

List which issues are fixed by this PR. You must list at least one issue.

Fixes flutter/flutter#16322

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.

dnfield

This LGTM but would appreciate a look from one of the other reviewers who is more famliar/active with Objective C :)

dnfield · 2023-03-29T07:04:12Z

I think this is an improvement but there's still a pretty big jump in the middle.

What does this look like on a larger screen like the iPad pro?

hellohuanlin · 2023-03-29T16:23:09Z

I think this is an improvement but there's still a pretty big jump in the middle.

What does this look like on a larger screen like the iPad pro?

Yeah the ugly part is in the middle. Though when I try it on real device, it's almost unnoticeable, since it's moving. The iPad actually looks better due to closer width : height ratio.

cyanglaz · 2023-03-29T16:42:09Z

A crazy idea: is it possible to substitute a screenshot at the middle to avoid the "jump"?

hellohuanlin · 2023-03-29T16:51:55Z

A crazy idea: is it possible to substitute a screenshot at the middle to avoid the "jump"?

Not sure what kind of screenshot can make it better (before or after the rotation?). We could fade in and out a white screen in the middle though, but that makes it even more noticeable.

Note that screenshot takes ~0.5-0.6 seconds, which is longer than the rotation duration (~0.4 seconds). So the only choice for screenshot is before the rotation happens.

jmagman · 2023-03-29T19:54:26Z

shell/platform/darwin/ios/framework/Source/FlutterViewController.mm

+  // TODO(hellohuanlin): Use [self mainScreenIfViewLoaded] instead of [UIScreen mainScreen].
+  // This requires adding the view to window during unit tests, which calls multiple engine calls
+  // that is hard to mock since they take/return structs. An alternative approach is to partial mock
+  // the FlutterViewController to make view controller life cycle methods no-op, and insert
+  // this mock into the responder chain.


There's examples of this https://github.com/flutter/engine/pull/37719/files#diff-9df3e6878a0f23383e1f2de991386935e435c5b77c863de75bd67a4ced38591dR200

See also our conversation in https://github.com/flutter/engine/pull/37719/files#r1046581397

I think you should try to use -mainScreenIfViewLoaded here instead of leaving the TODO, I don't particularly want to add more deprecated API usage, and it probably should be guarded with an ifLoaded.

Nice! I did not think about just partial mocking mainScreenIfViewLoaded

jmagman · 2023-04-05T16:55:44Z

I think you need to rebase onto #40732.

flutter-dashboard · 2023-04-11T01:27:25Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

Changes reported for pull request #40730 at sha f08fc61

jmagman · 2023-04-13T21:24:50Z

@hellohuanlin I'm not sure why there's a canvaskit_text_styles_text_style_half_leading_overrides_paragraph_style_half_leading golden change on this PR. You can file an issue but don't let it block you. Either push an empty commit or manually merge.

hellohuanlin · 2023-04-13T22:02:44Z

@jmagman I'm curious to learn how did you navigate this website? I have logged in and didn't find anything.

jmagman · 2023-04-13T22:16:22Z

@jmagman I'm curious to learn how did you navigate this website? I have logged in and didn't find anything.

I'm in no way the expert, but I checked "Digests: Positive" at the top:

I couldn't find a good description of how to use the Skia Gold client UI, just https://github.com/flutter/flutter/wiki/Writing-a-golden-file-test-for-package%3Aflutter

auto-submit · 2023-04-17T18:18:23Z

auto label is removed for flutter/engine, pr: 40730, due to - The status or check suite Linux linux_android_aot_engine has failed. Please fix the issues identified (or deflake) before re-applying this label.

… rotation distortion (flutter/engine#40730)

…125001) flutter/engine@b2d0738...20034a8 2023-04-17 [email protected] Reland "Migrate mac_host_engine to engine v2 builds." (flutter/engine#41279) 2023-04-17 [email protected] [rotation_distortion] Use "delayed swap" solution to reduce rotation distortion (flutter/engine#40730) 2023-04-17 [email protected] null check added to avoid NPE while calling FlutterView.detachFromFlutterEngine() (flutter/engine#41082) 2023-04-17 [email protected] [Impeller] Make `DoMakeRasterSnapshot` output timeline event. (flutter/engine#41197) 2023-04-17 [email protected] [Impeller] Remove ContentContextOptions declarations from AnonymousContents (flutter/engine#41256) 2023-04-17 [email protected] Roll Dart SDK from 786a70d8ef6b to a335e6724332 (1 revision) (flutter/engine#41278) 2023-04-17 [email protected] Roll Fuchsia Linux SDK from atix5Ek_OOxH-uoPA... to Cy5LG4U2InaFLkJGz... (flutter/engine#41275) Also rolling transitive DEPS: fuchsia/sdk/core/linux-amd64 from atix5Ek_OOxH to Cy5LG4U2InaF If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-engine-flutter-autoroll Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

FaisalMohammadi · 2023-08-30T10:25:41Z

i have this issue in my app right now in flutter 3.10.5 can anybody tell how di i delay the swap

hellohuanlin · 2023-08-30T17:22:55Z

@FaisalMohammadi it should already be enabled in the latest release. It's not perfectly smooth, but significantly better than the previous behavior.

FaisalMohammadi · 2023-08-30T21:13:39Z

Ok perfect, you mean then in flutter 3.13, because now i have 3.10.5 and i see huge streching in my widgets.

FaisalMohammadi · 2023-08-31T12:52:11Z

I have updated the flutter sdk to the latest 3.13.2 and i am still facing this issue. like in this video i recorded

i have also tested in real device its the same

rotation-distortion.mp4

hellohuanlin · 2023-08-31T23:10:21Z

@FaisalMohammadi this seems like frame drop issue. are you doing anything heavy? Can you try it on an older version before this is landed, so we can compare?

FaisalMohammadi · 2023-09-01T08:52:33Z

you mean in a older simulator?
the widget tree for that specific widget looks like this

i am using offstage to show bottom navigation bar persistantly in every page so when i call my widget directly from main and not having bottom navigation bar and the other stuff as shown in the widget tree, then the result is a bit faster.

hellohuanlin · 2023-09-02T00:40:20Z

@FaisalMohammadi I meant older Flutter version when this PR is not landed.

flutter-dashboard bot added the platform-ios label Mar 28, 2023

hellohuanlin force-pushed the rotation_delayed_swap branch from 25d04f2 to c25de0b Compare March 28, 2023 22:54

hellohuanlin marked this pull request as ready for review March 28, 2023 22:57

hellohuanlin requested review from jmagman, cyanglaz and dnfield March 28, 2023 22:59

hellohuanlin changed the title ~~[rotation_distortion] Use "delayed swap" approach to reduce rotation distortion~~ [rotation_distortion] Use "delayed swap" solution to reduce rotation distortion Mar 28, 2023

dnfield reviewed Mar 29, 2023

View reviewed changes

jmagman reviewed Mar 29, 2023

View reviewed changes

jmagman approved these changes Mar 29, 2023

View reviewed changes

hellohuanlin mentioned this pull request Apr 3, 2023

Rotation on iOS does not look right flutter/flutter#16322

Closed

hellohuanlin force-pushed the rotation_delayed_swap branch from d8c7935 to f08fc61 Compare April 11, 2023 00:49

hellohuanlin added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 11, 2023

flutter-dashboard bot added the will affect goldens label Apr 11, 2023

hellohuanlin added 2 commits April 17, 2023 11:08

[rotation_distortion]delayed swap to reduce rotation distortion

09e4dc1

use mainScreenIfViewLoaded

ba8828f

hellohuanlin force-pushed the rotation_delayed_swap branch from f08fc61 to ba8828f Compare April 17, 2023 18:08

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Apr 17, 2023

hellohuanlin added the autosubmit Merge PR when tree becomes green via auto submit App label Apr 17, 2023

auto-submit bot merged commit 1c1dfda into flutter:main Apr 17, 2023

engine-flutter-autoroll mentioned this pull request Apr 17, 2023

Roll Flutter Engine from b2d07388ceb6 to 20034a8d62c4 (7 revisions) flutter/flutter#125001

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Apr 17, 2023

1c1dfdabd [rotation_distortion] Use "delayed swap" solution to reduce…

e89b125

… rotation distortion (flutter/engine#40730)

jmagman mentioned this pull request Oct 4, 2024

Migrate FlutterViewController to ARC #55669

Merged

9 tasks

dkwingsmt mentioned this pull request May 2, 2025

Animation during orientation change is wrong flutter/flutter#168118

Open

[rotation_distortion] Use "delayed swap" solution to reduce rotation distortion #40730

[rotation_distortion] Use "delayed swap" solution to reduce rotation distortion #40730

Uh oh!

Conversation

hellohuanlin commented Mar 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

dnfield left a comment

Choose a reason for hiding this comment

Uh oh!

dnfield commented Mar 29, 2023

Uh oh!

hellohuanlin commented Mar 29, 2023

Uh oh!

cyanglaz commented Mar 29, 2023

Uh oh!

hellohuanlin commented Mar 29, 2023

Uh oh!

jmagman Mar 29, 2023

Choose a reason for hiding this comment

Uh oh!

hellohuanlin Mar 29, 2023

Choose a reason for hiding this comment

Uh oh!

jmagman commented Apr 5, 2023

Uh oh!

flutter-dashboard bot commented Apr 11, 2023

Uh oh!

jmagman commented Apr 13, 2023

Uh oh!

hellohuanlin commented Apr 13, 2023

Uh oh!

jmagman commented Apr 13, 2023

Uh oh!

auto-submit bot commented Apr 17, 2023

Uh oh!

FaisalMohammadi commented Aug 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hellohuanlin commented Aug 30, 2023

Uh oh!

FaisalMohammadi commented Aug 30, 2023

Uh oh!

FaisalMohammadi commented Aug 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hellohuanlin commented Aug 31, 2023

Uh oh!

FaisalMohammadi commented Sep 1, 2023

Uh oh!

hellohuanlin commented Sep 2, 2023

Uh oh!

Uh oh!

hellohuanlin commented Mar 28, 2023 •

edited

Loading

FaisalMohammadi commented Aug 30, 2023 •

edited

Loading

FaisalMohammadi commented Aug 31, 2023 •

edited

Loading