In iOS version 17.2, when moving the input focus in a WebView, an unknown area appears at the top of the screen. #1947

wonbaejeon · 2023-12-27T04:42:21Z

I have read the Getting Started section
I have already searched for the same problem

Environment

Technology	Version
Flutter version	(Channel stable, 3.16.4, on macOS 14.2 23C64 darwin-arm64,
locale ko-KR)
Plugin version	flutter_inappwebview: ^5.7.2+3
Android version	-
iOS version	17.2
macOS version	14.2
Xcode version	15.1
Google Chrome version	-

Device information:

Description

Expected behavior:

When moving the keyboard focus, there should be no unknown area appearing at the top of the screen

Current behavior:

In iOS version 17.2, when moving the keyboard focus, an unknown area appears at the top of the screen

Steps to reproduce

In iOS version 17.2, when moving the input focus in a WebView, an unknown area appears at the top of the screen.
Please refer to the video.

I am aware that setting 'resizeToAvoidBottomInset' of the scaffold to false prevents the UI from being resized by the keyboard, so the issue is not reproducible.
However, I want the bottom button to be positioned above the keyboard when the body size changed.

This issue is not reproducible on Android, and it occurs only on iOS version 17.2.

I believe this may be an issue on the Flutter side due to the OS version update. Your thoughts on this matter are appreciated.

I observed different behaviors based on the iOS version when testing with the same code.

I released an app that implemented the sign-up screen in that way, but after the OS upgrade, the issue mentioned above is occurring

I am using Flutter InAppWebView, and the result is the same when using Flutter WebView
flutter_inappwebview: ^5.7.2+3

Images

[Dart code]

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class TestWebView extends StatelessWidget {
  const TestWebView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: InAppWebView(
          initialFile: "assets/test2.html",
        ),
      ),
    );
  }
}

[WebCode]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Mobile Keyboard Inputs</title>
    <script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer></script>
    <style>
    html,body{
        height:100%;
    }
    .container{
        position:relative;
        height:100%;
    }
    .btnBottom{
        position:fixed;
        width:100%;
        bottom:0;
        left:0;
    }
    </style>
</head>
<body>

<h2>Mobile Keyboard Inputs Example</h2>

<div class="container">
<form action="/submit" method="post">
        <label for="input0">Input Box 0:</label>
        <input type="text" id="input0" name="input0" placeholder="Type something..." />

        <br>

        <label for="input1">Input Box 1:</label>
        <input type="text" id="input1" name="input1" placeholder="Type something..." />

        <br>

        <label for="input2">Input Box 2:</label>
        <input type="number" id="input2" name="input2" pattern="\d*" placeholder="number" />

        <br>

        <label for="input3">Input Box 3:</label>
        <input type="number" id="input3" name="input3" pattern="\d*" placeholder="number" />

        <br>

        <button type="submit" class="btnBottom">버튼</button>
</form>
</div>

</body>
</html>

Stacktrace/Logcat

github-actions · 2023-12-27T04:42:32Z

👋 @wonbaejeon

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!

hexh250786313 · 2023-12-28T06:57:12Z

Same on iOS 17.2.1.

mohammedX6 · 2023-12-28T13:11:01Z

use latest version 6.0.0

wonbaejeon · 2023-12-29T00:31:50Z

@mohammedX6
I already tested latest version 6.0.0. However, this issue still persists.
The issue is not related to the flutter webview plugin version.

guzishiwo · 2023-12-29T09:01:47Z

Same on iOS 17.3 beta

AielloChan · 2023-12-29T09:06:50Z

A smaller html file to reproduce this problem

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
    />
  </head>
  <body>
    <div style="height: 100vh; overflow-y: auto">
      <div>Focus in different inputs to reproduce the problem</div>
      <input type="text" placeholder="focus me first" /> <br />
      <input type="text" placeholder="then focus me" /> <br />
      <button>hide keyboard</button>
      <div style="height: 1000px"></div>
    </div>
  </body>
</html>

RMatushkin · 2024-01-01T16:59:03Z

I think I can help you because I have faced strange focus behavior when a virtual keyboard appears, and I managed to find a solution that rid me of 99% of all problems, and it was always related to the SafeArea widget. Looking at its parameters, I found one called maintainBottomViewPadding, try setting its value to true, and I think all problems will go away.

hexh250786313 · 2024-01-02T02:42:37Z

Looking at its parameters, I found one called maintainBottomViewPadding, try setting its value to true, and I think all problems will go away.

@RMatushkin Is maintainBottomViewPadding the SafeArea parameter? I have tried to change its value but it can't help.

hexh250786313 · 2024-01-02T02:47:23Z

Related flutter issue: flutter/flutter#140501

RMatushkin · 2024-01-02T13:39:18Z

@hexh250786313 I don't see any issues on my side. Here is my environment:

Flutter 3.16.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 78666c8dc5 (2 weeks ago) • 2023-12-19 16:14:14 -0800
Engine • revision 3f3e560236
Tools • Dart 3.2.3 • DevTools 2.28.4

flutter_inappwebview: 6.0.0 • https://github.com/pichillilorenzo/flutter_inappwebview/releases/tag/v6.0.0

And this is how I use InAppWebView:

Scaffold(
  resizeToAvoidBottomInset: false,
  body: SafeArea(
    maintainBottomViewPadding: true,
    child: InAppWebView(...),
  ),
)

753728e3-448a-42dd-87e4-d32b6e5f4c79.mp4

wonbaejeon · 2024-01-03T00:59:45Z

Dear @RMatushkin
I am aware that setting 'resizeToAvoidBottomInset' of the scaffold to false prevents the UI from being resized by the keyboard, so the issue is not reproducible.
However, I want the bottom button to be positioned above the keyboard when the body size changed.

RMatushkin · 2024-01-03T01:03:47Z

Dear @RMatushkin I am aware that setting 'resizeToAvoidBottomInset' of the scaffold to false prevents the UI from being resized by the keyboard, so the issue is not reproducible. However, I want the bottom button to be positioned above the keyboard when the body size changed.

I think I understand the problem. Yes, indeed, the bottom button is now completely blocked by my keyboard. My solution doesn't work, sorry.

RMatushkin · 2024-01-03T10:53:17Z

I tested the behavior in the Safari browser on a physical device. There behavior is exactly as I showed in the video above. Therefore, this behavior is standard. And in order to achieve the behavior that the author expects, it is necessary to write code and handle the keyboard, this is not a bug in the current WebView plugin.

@hexh250786313 Could you please check how your page works in Safari on a physical device or simulator? You will be able to understand where the problem is in the WebView and where this is normal behavior.

hexh250786313 · 2024-01-03T11:41:55Z

@RMatushkin Ty for your nice explanation, but I'm afraid I still don't know what happened. I am working on other projects recently and I don't have time to investigate this issue. My team decided to wait for the flutter official response.

I will try to figure it out when I have time. Awesome thanks for your help anyway.

EdwardAW · 2024-01-03T12:21:40Z

@RMatushkin It does appear that in the video you are using IOS version 17.0, not 17.2, which this bug doesn't appear to happen on.

RMatushkin · 2024-01-03T12:28:05Z

@RMatushkin It does appear that in the video you are using IOS version 17.0, not 17.2, which this bug doesn't appear to happen on.

I mentioned above that the same behavior occurs in the Safari browser on a physical device with iOS version 17.2.1, when the keyboard covers the button. Could you please check this behavior on physical device in Safari?

RMatushkin · 2024-01-06T17:53:38Z

Is there any progress? I'm currently experiencing the same situation. As shown in the picture, the html element is moved to the bottom.

Could you please check the behaviour on physical device in Safari? It seems like it's default behaviour in Safari, so I think we shouldn't expect another behaviour in WebView. As I wrote above, we have to write some part of the code to have this expected behaviour that described in this topic.

dglee-me · 2024-01-07T01:13:35Z

Is there any progress? I'm currently experiencing the same situation. As shown in the picture, the html element is moved to the bottom.

Could you please check the behaviour on physical device in Safari? It seems like it's default behaviour in Safari, so I think we shouldn't expect another behaviour in WebView. As I wrote above, we have to write some part of the code to have this expected behaviour that described in this topic.

It works normally in safari, but it only works like that in webview.

holailusoria · 2024-02-05T15:40:08Z

same issue

lanistor · 2024-06-11T17:48:58Z

This problem havn't been resolved till now.
Why iOS do this.

…us in a WebView, an unknown area appears at the top of the screen.

neederkkh · 2024-08-28T07:27:16Z

I have reproduced and tested the issue, and it seems to be an iOS-specific problem.  

cause : There's a part where scrollView.adjustedContentInset is applied to scrollView.contentInset. When the keyboard appears, the bottom value of contentInset becomes negative. In this scenario, if another input box is tapped, UIScrollView.contentOffset momentarily takes on the value that was applied to scrollView.contentInset.

solve : This is a temporary solution, but restoring scrollView.contentOffset in the aforementioned scenario resolves the issue for now. 

I've forked the repository and applied the fix there.

Fiile : pubspec.yaml  

dependency_overrides:
  flutter_inappwebview_ios:
    git:
      url: https://github.com/zpdL-Studio/flutter_inappwebview.git
      ref: 3ff3bb1681f41ffe49a9bdd8a1d7181014af7204
      path: flutter_inappwebview_ios

 It's a temporary fix, hopefully a permanent solution is found soon!

holailusoria · 2024-10-24T15:28:53Z

Same problem

pichillilorenzo · 2024-11-12T17:26:07Z

I finally found a workaround to fix this.
It will be available on the next beta version "6.2.0-beta.2".
In the meantime, I think you can test it using the master branch.

pichillilorenzo · 2024-11-26T21:08:18Z

Released new version 6.2.0-beta.2 with the fix.

wonbaejeon added the bug Something isn't working label Dec 27, 2023

VincentVInsideApp mentioned this issue Feb 21, 2024

In iOS version 17.2, when moving the input focus in a WebView, an unknown area appears at the top of the screen. flutter/flutter#140501

Open

tolluset mentioned this issue Apr 2, 2024

[fix] 앱에서 키패드 올라올 때 이슈 jirum-alarm/jirum-alarm-frontend#176

Closed

zpdL-Studio pushed a commit to zpdL-Studio/flutter_inappwebview that referenced this issue Aug 28, 2024

pichillilorenzo#1947 - In iOS version 17.2, when moving the input foc…

3ff3bb1

…us in a WebView, an unknown area appears at the top of the screen.

pichillilorenzo closed this as completed in e0ffc3e Nov 12, 2024

pichillilorenzo added a commit that referenced this issue Nov 12, 2024

updated fix for #1947 when resizeToAvoidBottomInset is false

e74cde0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

In iOS version 17.2, when moving the input focus in a WebView, an unknown area appears at the top of the screen. #1947

In iOS version 17.2, when moving the input focus in a WebView, an unknown area appears at the top of the screen. #1947

wonbaejeon commented Dec 27, 2023 •

edited

Loading

github-actions bot commented Dec 27, 2023

hexh250786313 commented Dec 28, 2023

mohammedX6 commented Dec 28, 2023

wonbaejeon commented Dec 29, 2023

guzishiwo commented Dec 29, 2023

AielloChan commented Dec 29, 2023

RMatushkin commented Jan 1, 2024 •

edited

Loading

hexh250786313 commented Jan 2, 2024

hexh250786313 commented Jan 2, 2024

RMatushkin commented Jan 2, 2024 •

edited

Loading

wonbaejeon commented Jan 3, 2024

RMatushkin commented Jan 3, 2024

RMatushkin commented Jan 3, 2024 •

edited

Loading

hexh250786313 commented Jan 3, 2024

EdwardAW commented Jan 3, 2024

RMatushkin commented Jan 3, 2024 •

edited

Loading

RMatushkin commented Jan 6, 2024

dglee-me commented Jan 7, 2024

holailusoria commented Feb 5, 2024

lanistor commented Jun 11, 2024

neederkkh commented Aug 28, 2024

holailusoria commented Oct 24, 2024

pichillilorenzo commented Nov 12, 2024

pichillilorenzo commented Nov 26, 2024

In iOS version 17.2, when moving the input focus in a WebView, an unknown area appears at the top of the screen. #1947

In iOS version 17.2, when moving the input focus in a WebView, an unknown area appears at the top of the screen. #1947

Comments

wonbaejeon commented Dec 27, 2023 • edited Loading

Environment

Description

Steps to reproduce

Images

Stacktrace/Logcat

github-actions bot commented Dec 27, 2023

hexh250786313 commented Dec 28, 2023

mohammedX6 commented Dec 28, 2023

wonbaejeon commented Dec 29, 2023

guzishiwo commented Dec 29, 2023

AielloChan commented Dec 29, 2023

RMatushkin commented Jan 1, 2024 • edited Loading

hexh250786313 commented Jan 2, 2024

hexh250786313 commented Jan 2, 2024

RMatushkin commented Jan 2, 2024 • edited Loading

wonbaejeon commented Jan 3, 2024

RMatushkin commented Jan 3, 2024

RMatushkin commented Jan 3, 2024 • edited Loading

hexh250786313 commented Jan 3, 2024

EdwardAW commented Jan 3, 2024

RMatushkin commented Jan 3, 2024 • edited Loading

RMatushkin commented Jan 6, 2024

dglee-me commented Jan 7, 2024

holailusoria commented Feb 5, 2024

lanistor commented Jun 11, 2024

neederkkh commented Aug 28, 2024

holailusoria commented Oct 24, 2024

pichillilorenzo commented Nov 12, 2024

pichillilorenzo commented Nov 26, 2024

wonbaejeon commented Dec 27, 2023 •

edited

Loading

RMatushkin commented Jan 1, 2024 •

edited

Loading

RMatushkin commented Jan 2, 2024 •

edited

Loading

RMatushkin commented Jan 3, 2024 •

edited

Loading

RMatushkin commented Jan 3, 2024 •

edited

Loading