capacitor
capacitor copied to clipboard
Fix/android legacy viewport calculation
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-bottomalways returns 0- Inconsistent behavior compared to Android 15+
Solution
Enhanced CapacitorWebView with native viewport correction:
- Navigation bar height detection using Android system resources
- Viewport override for
visualViewport.heighton Android < 15 - CSS custom properties injection for
--safe-area-inset-bottom - 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.