[iOS] Avoid keyboard animation jank and laggy on Promotion devices.

[luckysmg]

If use CADisplaylink directly, the refresh rate of CADisplaylink is not correct
It doesn't match the refresh using for flutter rendering, and this will cause some junk and laggy when start keyboard animation.

So using VsyncClient will fix this (See VsyncClient.setMaxRefreshRateIfEnabled)

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

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 tests are passing.

[flutter-dashboard]

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.

[luckysmg]

Tests has added.

[jmagman]

@cyanglaz could you take a look?

[cyanglaz]

Thanks for updating it to use vsync client. Let's also mention the purpose of using vsync client in the PR description.

[luckysmg]

Thanks for updating it to use vsync client. Let's also mention the purpose of using vsync client in the PR description.

Done

[cyanglaz]

LGTM.
@gaaclarke Do you mind giving a secondary review?

[luckysmg]

I think this looks good. This section of code is pretty tricky and this change makes it even more complicated. I'd like to make sure that we are actually getting the benefit we want before merging it. @cyanglaz did you test this locally?

I think this PR is more suitable for this desc:
flutter/flutter#101653 (comment)

[luckysmg]

And If you want to run locally to test the benefit. You can use this demo code😄
It can be run directly without any setup:
flutter_demo.zip

You can test according to this:
flutter/flutter#101653 (comment)

The comparison is very obvious.

[luckysmg]

Hi @gaaclarke @cyanglaz
I have merged main into this branch, so that maybe it will not take so much time to compile code when you switching to this branch and test locally😄.

[luckysmg]

Hi @gaaclarke @cyanglaz
Sorry.I think I didn't made things very clear before. Here is coming:

This PR is to mainly avoid the keyboard animation junk and laggy on Promotion devices (eg:iPhone13Pro)

The visual glitch in flutter/flutter#105687 . I think it is due to the cause below probably:
On the engine side,we use CADisplaylink or VsyncClient to track the animation interpolation manually, but it is not a iOS native view that use the way like:UIView.animate(block:),so it maybe have some diffrence...

So why's this visual glitch related with this PR?
Because the CADisplayLink's refresh rate using in FlutterViewController's keyboard animation doesn't match the refresh rate of VsyncClient using for rendering on 120HZ devices. And that mismatch will cause some junk and laggy,which will enlarge the visual glitch. (That's why 60hz devices are fine and keyboard animation is smoother, because both of them refresh rate are 60HZ)

In brief, this PR is to mainly avoid the keyboard animation junk and laggy, and will reduce the visual glitch.....

Before ，I wanted to show you a video that can show the difference before and after applying this PR.
But the recorded screen video on iPhone is usually 45FPS-55FPS, it is not enough and it is very difficult to see the differences before and after applying this PR. But it is easy to see it directly with our eyes😄.
And that's why I recommend you to test it locally to see the comparsion😄

[rotorgames]

@luckysmg Great work. I guess this PR is most important for improving frame rate performance on devices with promotions so far.

setAllowPauseAfterVsync method can help to improve scroll and gestures performance as I described in this comment. flutter/flutter#101653 (comment)

IMHO, we don't need to pause CADisplaylink during a keyboard animation and any user's gestures (like scroll and etc)

[luckysmg]

@rotorgames Oh yeah, I'll also take a look that problem you said.

[luckysmg]

Here is the corresponding flutter framework ref to run locally:
ab23233

[cyanglaz]

Tested on my iPhone 13 pro and the Jank is gone with this fix.
@luckysmg Thank you!

@gaaclarke Do you mind to take another look?

[gaaclarke]

Thanks, LGTM =)

[delfme]

The issue with keyboard animation on flutter is also that the curve is different from native. It is strange that nodoby mentioned this so far but it seems I couldnt find an open issue for that.

Native video below:

IMG_5074.MOV

[delfme]

As from video above, keyboard and textfield move up almost in sync. While in flutter they are not in sync and visual result looks weird to the end user

[luckysmg]

As from video above, keyboard and textfield move up almost in sync. While in flutter they are not in sync and visual result looks weird to the end user

See

flutter/flutter#105687 (comment)

[dayoul]

Hello @luckysmg , Thank you for the PR. Is this feature merged to latest stable flutter version(3.3.9)?

[luckysmg]

No, but it should be in beta channel

[jmagman]

This is available in 3.4.0-17.0.pre, see https://github.com/flutter/flutter/wiki/Where's-my-Commit%3F#finding-the-framework-commit-that-contains-engine-commit-x

[dayoul]

@jmagman oh I didn't know how to check the corresponding version. Thanks for the reference!