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 know set resizeToAvoidBottomInset of the Scaffold to false, causing the UI to be obscured by the keyboard, the unknown area at the top of the screen does not appear.
However, I want the UI not to be obscured when the keyboard is visible.
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 am using Flutter InAppWebView, and the result is the same when using Flutter WebView
flutter_inappwebview: ^5.7.2+3
[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>
When moving the keyboard focus, there should be no unknown area appearing at the top of the screen
