capacitor icon indicating copy to clipboard operation
capacitor copied to clipboard

Fix/android legacy viewport calculation

Open ish1416 opened this issue 1 month ago • 0 comments

Description

Fixes incorrect window.innerHeight and visualViewport.height values on Android < 15 devices, which cause UI elements to be partially overlapped by the keyboard when navigation bars are present.

Closes #8181

Problem

On Android < 15 devices with navigation bars (gesture or button navigation), the browser's viewport calculations don't account for the navigation bar height when the keyboard is open. This causes:

  • Modals and dialogs to be positioned too low
  • Bottom UI elements hidden behind keyboard
  • safe-area-inset-bottom always returns 0
  • Inconsistent behavior compared to Android 15+

Solution

Enhanced CapacitorWebView with native viewport correction:

  1. Navigation bar height detection using Android system resources
  2. Viewport override for visualViewport.height on Android < 15
  3. CSS custom properties injection for --safe-area-inset-bottom
  4. Automatic resize events to notify components

Testing

  • ✅ OnePlus 12R (Android 14) - UI no longer overlapped
  • ✅ Samsung S23 (Android 13) - Correct viewport calculations
  • ✅ Pixel 8 (Android 14) - Bottom padding applied correctly
  • ✅ No regression on Android 15+ devices

Breaking Changes

None - maintains full backward compatibility.

ish1416 avatar Nov 08 '25 06:11 ish1416