Keyboard changes the viewport size of browser in iOS 17 that makes strange visual behaviors

[LeandroMoura3]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

The web app works well until the user open the keyboard, then close it. When it happens, the viewport size of the browser becomes smaller than the viewport of the flutter widget, so the 'position:fixed; bottom: 0' float over the content. When the user (I do it here with simulator) closes the keyboard manually via command k before close it in browser, the viewport of browser becomes default, so the bug are fixed. The top elements 'top-0' are affected too.

I only reproduce this bug in a iOS 17 simulator or in a real iOS 17 app.

Expected Behavior

The viewport size of browser web view don't change when close the keyboard without command k.

Steps with code example to reproduce

Open some web site with any content fixed at the bottom of the site. In my case, the quasar.dev works for this demonstration. The 'accept cookies' are a bottom fixed element. Verify that this element is fixed at the bottom.

Open the keyboard, and then close it like a user does, in the check mark. Verify that the bottom fixed content float over the content. This make a very bug effect in bottom menus like components.

Stacktrace/Logs

The logs of DOM in webview:

before keyboard opens
"window.innerHeight":874,"window.outerHeight":874,"screen.height":874,"documentElement.clientHeight":874,"visualViewport.height":874,"visualViewport.offsetTop":0,"visualViewport.pageTop":0,"window.scrollY":0,"document.scrollTop":0,"visualViewport.scale":1

with keyboard opens
"window.innerHeight":874,"window.outerHeight":874,"screen.height":874,"documentElement.clientHeight":874,"visualViewport.height":461,"visualViewport.offsetTop":280.65625,"visualViewport.pageTop":280.65625,"window.scrollY":281,"document.scrollTop":281,"visualViewport.scale":1

after keyboard closed
"window.innerHeight":874,"window.outerHeight":874,"screen.height":874,"documentElement.clientHeight":874,"visualViewport.height":806,"visualViewport.offsetTop":68,"visualViewport.pageTop":281,"window.scrollY":281,"document.scrollTop":281,"visualViewport.scale":1

look to visualViewport.height with 874 at the first log and 806 at the last, and visualViewport.offsetTop with 68 pixels, the float of the menu bottom.

Flutter version

Flutter 3.41.2

Operating System, Device-specific and/or Tool

macOs

Plugin version

^6.1.5

Additional information

The strange behavior pictured.

Self grab

• I'm ready to work on this issue!