Red flash/bounce" behind a Flutter WebView on iOS when the keyboard appears

Question

I am experiencing a bounce issue when the keyboard appears while the Input is focused, as shown in the attached screenshot video. IssueVideo

To facilitate viewing, I have set the background to red.

Additionally, I have shared my WebView controller and Frontend HTML code that are loaded into the WebView.

I would appreciate your kind suggestions and assistance in resolving this issue on my application.

/// Create WebView controller with all configurations
 Future<void> _createWebViewController(String initialUrl) async {
 try {
 _messageHandler?.sendTokenToWebView();
 PrintUtils.customLog('Send token Initial : $initialUrl');
 // Create WebView controller with WebKit-specific configuration for iOS
 if (defaultTargetPlatform == TargetPlatform.iOS) {
 _controller = WebViewController.fromPlatformCreationParams(
 WebKitWebViewControllerCreationParams(
 allowsInlineMediaPlayback: true, // Good practice for media pages
 mediaTypesRequiringUserAction: const {
 PlaybackMediaTypes.audio,
 PlaybackMediaTypes.video,
 }, // Optional - allows autoplay
 ),
 );
 } else {
 _controller = WebViewController();
 }
 _controller!
 ..setJavaScriptMode(JavaScriptMode.unrestricted)
 ..setBackgroundColor(Colors.red)
 ..addJavaScriptChannel(
 'FlutterPushBridge',
 onMessageReceived: (msg) => _messageHandler?.onWebMessage(msg),
 )
 ..addJavaScriptChannel(
 'Flutter',
 onMessageReceived: (JavaScriptMessage message) {
 _navigationHandler?.handleExternalLinkFromJS(message.message);
 },
 )
 ..addJavaScriptChannel(
 'SessionManager',
 onMessageReceived: (JavaScriptMessage message) {
 if (message.message == 'logout') {
 _sessionHandler?.handleManualLogout();
 }
 },
 )
 ..setNavigationDelegate(
 NavigationDelegate(
 onNavigationRequest: (NavigationRequest request) async {
 // Check for CloudFront error URLs before navigation
 if (request.url.toLowerCase().contains('cloudfront') ||
 request.url.toLowerCase().contains('403') ||
 request.url.toLowerCase().contains('forbidden')) {
 if (mounted) {
 setState(() {
 _showLoadErrorScreen = true;
 _showOfflineScreen = false;
 });
 }
 return NavigationDecision.prevent;
 }
 return await _navigationHandler?.handleNavigationRequest(
 request,
 ) ??
 NavigationDecision.navigate;
 },
 onPageStarted: (String url) {
 _messageHandler?.sendTokenToWebView();
 PrintUtils.customLog('Send token Start : $url');
 _navigationHandler?.onPageStarted(url);
 // Reset content loaded state when new page starts loading
 try {
 _stateManager.setContentLoaded(false);
 } catch (e) {
 PrintUtils.customLog(
 'Error resetting content loaded state: $e',
 );
 }
 // Start immediate content checking for CloudFront errors
 _startImmediateCloudFrontCheck();
 setState(() {});
 },
 onPageFinished: (String url) async {
 // Check for CloudFront error pages after page loads
 await _checkForCloudFrontError();
 await _navigationHandler?.onPageFinished(url);
 _messageHandler?.sendTokenToWebView();
 PrintUtils.customLog('Send token Finish : $url');
 _messageHandler?.sendTicketIDToWebView();
 await _configureZoomRestrictions();
 // Mark content as loaded
 try {
 _stateManager.setContentLoaded(true);
 } catch (e) {
 PrintUtils.customLog('Error setting content loaded state: $e');
 }
 // Mark initialization as complete
 if (_isInitializing) {
 _isInitializing = false;
 PrintUtils.customLog('WebView initialization completed');
 }
 setState(() {});
 },
 ),
 )
 ..setUserAgent(
 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1',
 );
 // Configure media capture permissions
 await _configureMediaCapturePermissions();
 _debuggingEnabled();
 // Load the initial URL
 await _controller!.loadRequest(
 Uri.parse(initialUrl),
 headers: {'X-App-Client': 'Flutter'},
 );
 // Inject JavaScript to detect HTTP status codes
 await _injectHttpErrorDetectionScript();
 // Start periodic check for CloudFront error pages
 _startCloudFrontErrorCheck();
 // Mark controller as ready
 _isControllerReady = true;
 // Immediately check for CloudFront errors
 await _checkForCloudFrontError();
 try {
 _stateManager.setLoading(false);
 } catch (e) {
 PrintUtils.customLog(
 'Error accessing _stateManager in controller ready: $e',
 );
 }
 } catch (e) {
 PrintUtils.customLog('Error during WebView controller creation: $e');
 try {
 _stateManager.setLoading(false);
 } catch (stateError) {
 PrintUtils.customLog(
 'Error accessing _stateManager in controller creation error: $stateError',
 );
 }
 _isInitializing = false;
 rethrow;
 }
 }

• Community: Please trim your code to make it easier to find your problem. Follow these guidelines to create a minimal reproducible example.