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

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;
    }
  }