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

[x] I have read the Getting Started section
[x] 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

Monosnap screencast 2023-12-21 17-01-31

[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

Dec 27 '23 04:12 wonbaejeon

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

Dec 27 '23 04:12 github-actions[bot]

Same on iOS 17.2.1.

Dec 28 '23 06:12 hexh250786313

use latest version 6.0.0

Dec 28 '23 13:12 mohammedX6

@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.

Dec 29 '23 00:12 wonbaejeon

Same on iOS 17.3 beta

Dec 29 '23 09:12 guzishiwo

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>

Dec 29 '23 09:12 AielloChan

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.

Jan 01 '24 16:01 RMatushkin

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.

Jan 02 '24 02:01 hexh250786313

Related flutter issue: https://github.com/flutter/flutter/issues/140501

Jan 02 '24 02:01 hexh250786313

@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(...),
  ),
)

https://github.com/pichillilorenzo/flutter_inappwebview/assets/54648323/ba450ce1-9447-4ec6-9f27-3c9714752656

Jan 02 '24 13:01 RMatushkin

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.

Jan 03 '24 00:01 wonbaejeon

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.

Jan 03 '24 01:01 RMatushkin

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.

Jan 03 '24 10:01 RMatushkin

@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.

Jan 03 '24 11:01 hexh250786313

@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.

Jan 03 '24 12:01 EdwardAW

@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?

Jan 03 '24 12:01 RMatushkin

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.

Jan 06 '24 17:01 RMatushkin

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.