Space above keyboard on iOS

user_545400 0
Viewed 2312

I tested both on the iOS simulator in xcode and on a physical iPhone 6 and both are showing an extra white space at the bottom of the page when the keyboard is open. I extends past the body and html elements but they background color still fills it. The problem has not appeared on Android.

This is my app with the white space highlighted. It disappears after the keyboard is closed. The popup is absolutely positioned. I've tried setting the overflow in CSS without success.

white space

I've noticed the same bug on bing.com when you click on an input field and scroll to the bottom. Any suggestions?

bing space

mobile-safari safari css html ios
1 Answers

This happens because of safeAreaInsets (bottom). In iPhones below X, bottom inset is 0, but iPhoneX and above have 34.0. You have to subtract this value, if you are setting autolayout constraints to safeArea.

self.view.safeAreaInsets.bottom

use this to subtract excess height. Let me know if you need elaborated answer with code.

user_108296640
Related