[Bug]: Android 15+: Keyboard overlap issue persists in Ionic Capacitor apps despite Edge-to-Edge configuration

[eyupduran]

Capacitor Version

Capacitor Version

• @capacitor/android: ^7.4.2
• @capacitor/cli: ^7.4.2
• @capacitor/core: ^7.4.2
• @capacitor/device: ^7.0.2
• @capacitor/ios: ^7.4.2
• @capacitor/keyboard: ^7.0.3
• @capacitor/share: ^7.0.2
• @capawesome/capacitor-android-edge-to-edge-support: ^7.2.3

Other API Details

### Other API Details
- React: ^19.1.0
- npm: 21.1.0
- Turbo (Monorepo): ^2.5.4

Platforms Affected

• iOS
• Android
• Web

Current Behavior

Current Behavior

On Android 15 devices (tested on Samsung Galaxy S24 Ultra, SM-S928B, Android 15, One UI with August 1, 2025 security patch), the keyboard still overlaps the input field at the very bottom of the screen when focused.

Even after applying the official recommendations and Medium article fix (using @capawesome/capacitor-android-edge-to-edge-support and updating capacitor.config.ts with adjustMarginsForEdgeToEdge: 'force' and Keyboard.resizeOnFullScreen: false), the issue persists.

I created a custom React hook (useEdgeToEdge) that enables or disables the Edge-to-Edge plugin dynamically depending on Device.getInfo().osVersion. On Android 15 and above, EdgeToEdge.enable() is called, otherwise it falls back to EdgeToEdge.disable(). This hook is used in App.tsx via useEdgeToEdge();.

Despite this, the input at the very bottom of the viewport is hidden behind the keyboard when focused on Android 15+. On Android 14 and below, the behavior is correct and the input is properly pushed above the keyboard.

Observed behavior:

• Input field positioned at the bottom is completely covered by the keyboard on Android 15+.
• Scrolling or resizing does not adjust the view to make the input visible.
• The issue occurs even when captureInput: true and adjustMarginsForEdgeToEdge: 'force' are set in capacitor.config.ts.

Additional info:

• A test video demonstrating the problem has been added under the project README (see attachments).
• Reproduction is consistent across different builds of the APK.

WhatsApp.Video.2025-09-23.saat.13.58.06_77577d71.mp4

Expected Behavior

On Android 15 devices, the input field at the bottom of the screen should remain visible when focused, and not be covered by the keyboard.

The viewport should automatically resize or scroll to accommodate the keyboard, ensuring that the input field is always accessible.

The Edge-to-Edge plugin (@capawesome/capacitor-android-edge-to-edge-support) and configuration settings (adjustMarginsForEdgeToEdge: 'force', Keyboard.resizeOnFullScreen: false, captureInput: true) should correctly handle keyboard interactions without manual workarounds.

The behavior should be consistent across all Android versions (including 15+) and match the working behavior seen on Android 14 and below.

Project Reproduction

https://medium.com/@Marshall110686/fixing-the-android-15-edge-to-edge-and-keyboard-overlap-bug-in-ionic-capacitor-apps-413dfbb4c5b6

Additional Information

Edge-to-Edge Support for Android 15

This project includes a custom React hook that dynamically enables or disables the Edge-to-Edge plugin depending on the Android version. On Android 15 and above, it ensures proper handling of the keyboard and input fields at the bottom of the screen.

capacitor.config.ts

android: {
  captureInput: true,
  adjustMarginsForEdgeToEdge: 'force'
},
plugins: {
  Keyboard: {
    resizeOnFullScreen: false // Prevents bad resizing
  },
  EdgeToEdge: {
    backgroundColor: '#003366' // Optional UI polish
  }
}

import { useEffect } from 'react';
import { Capacitor } from '@capacitor/core';
import { Device } from '@capacitor/device';
import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';

/**
 * Android 15+ edge-to-edge support hook
 * Dynamically enables or disables the Edge-to-Edge plugin based on OS version.
 */
export const useEdgeToEdge = () => {
  useEffect(() => {
    const initializeEdgeToEdge = async () => {
      try {
        // Only run on Android
        if (Capacitor.getPlatform() !== 'android') return;

        const info = await Device.getInfo();

        // Enable Edge-to-Edge for Android 15+, disable for older versions
        if (Number(info.osVersion) >= 15) {
          await EdgeToEdge.enable();
        } else {
          await EdgeToEdge.disable();
        }
      } catch (error) {
        console.warn('Edge-to-Edge plugin initialization failed:', error);
      }
    };

    initializeEdgeToEdge();
  }, []);
};

[kumibrr]

+1