flutter_inappwebview icon indicating copy to clipboard operation
flutter_inappwebview copied to clipboard

Published 20 hours ago • verified publisher icon pichillilorenzo

Scroll jank on iOS when keyboard opened in certain layout

Open Amareis opened this issue 2 years ago • 2 comments

Environment

Technology Version
Flutter version 3.0.5
Plugin version develop branch
Android version -
iOS version any from 12 to 15
Xcode version latest

Device information: iPhone 6+ (real) iPhone 13 (simulator)

Description

Given such layout: a) Webview is inside safe area (just like in repo example) b) body and html is overflow: hidden and height: 100% (so it should be resized when keyboard is opened) c) !!! There is input in bottom part of screen (so it will be hidden by keyboard)

Expected behavior: Click on input with keyboard opening should just resize window with proper layout changes.

Current behavior: There is pretty strange jank, video attached.

Size of this jank is related to position of input - the more input in keyboard zone, the bigger jank is. Pretty sure it's related to standard safari behavior of scrolling input into view on focus.

Steps to reproduce

  1. In develop branch, create scroll-bug.html in example/assets with such content:
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        body, html {
            height: 100%;
            margin: 0;
        }

        body {
            position: relative;
            background: green;
        }

        #header {
            background: red;
            font-size: 30px;
            top: 0;
            left: 0;
            right: 0;
        }

        #input {
            position: absolute;
            font-size: 30px;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div id="header">Header</div>
<input id="input"/>
</body>
</html>
  1. Replace initialUrlRequest with initialFile: "assets/scroll-bug.html" in in_app_webiew_example.screen.dart
  2. Start app on iPhone, then click on input

Images

https://user-images.githubusercontent.com/4806617/182839146-479b7489-4724-46d7-b0a6-ca1e1c791ecf.mov

Additional

There is similar bug in flutter webview widget: https://github.com/flutter/flutter/issues/98090 Also may be related: https://github.com/flutter/flutter/issues/105687

Amareis avatar Aug 04 '22 12:08 Amareis

👋 @Amareis

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

github-actions[bot] avatar Aug 04 '22 12:08 github-actions[bot]

Currently I just fork repo and disable onScrollChanged at all, and Instead just make:

public func scrollViewDidScroll(_ scrollView: UIScrollView) {
    scrollView.contentOffset = CGPoint(x: 0, y: 0)
}

And all is working good. For our app it's perfectly ok, since it is SPA with custom scroll logic, but there should be some more general solution, I think.

Amareis avatar Aug 04 '22 17:08 Amareis

Any updates here?

RMatushkin avatar Sep 22 '23 00:09 RMatushkin