Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Scroll jank on iOS when keyboard opened in certain layout #1271

Closed
4 tasks done
Amareis opened this issue Aug 4, 2022 · 5 comments
Closed
4 tasks done

Scroll jank on iOS when keyboard opened in certain layout #1271

Amareis opened this issue Aug 4, 2022 · 5 comments
Labels
bug Something isn't working stale

Comments

@Amareis
Copy link

Amareis commented Aug 4, 2022

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

Simulator.Screen.Recording.-.iPhone.13.-.2022-08-04.at.16.34.37.mov

Additional

There is similar bug in flutter webview widget: flutter/flutter#98090
Also may be related: flutter/flutter#105687
@Amareis Amareis added the bug Something isn't working label Aug 4, 2022
@github-actions
Copy link

github-actions bot commented Aug 4, 2022

👋 @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!

@Amareis
Copy link
Author

Amareis commented Aug 4, 2022

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.

@RMatushkin
Copy link

Any updates here?

@RMatushkin RMatushkin mentioned this issue Sep 22, 2023
Closed
@hann-yun hann-yun mentioned this issue Jun 13, 2024
Open
@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 4, 2024

This issue is stale and has been automatically closed because it has been open for more than 365 days with no activity. Please reopen a new issue if you still have it.

@github-actions github-actions bot added the stale label Oct 4, 2024
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Oct 4, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 1, 2024

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Something isn't working stale
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Amareis @RMatushkin