bug: ion-content height on iPhone XR causes ion-footer to disappear for landscape web users with 2+ tabs open

[thmclellan]

With Ionic 4.3 on iPhone XR (and probably all +4.7 screen sizes), when launching a modal in landscape mode, then the ion-content height is set too tall, so ion-footer does not display, for web-based Ionic (non-native).

It seems iOS Safari now shows address bar and tabs when in landscape mode on iPhone XR, but ion-content sets height as if the address bar and tabs did not show. As a result, ion-footer is displayed off screen for these users.

[thmclellan]

Tested and confirmed as an issue with Ionic 4.4.0 with a fresh starter repo... see https://github.com/thmclellan/ionic-content-test for working example.

If you open the app on iPhone XR, with or without tabs, you can see the window.innerHeight being changed dynamically, but ion-content does not resize as expected, so ion-footer is hidden.

Screenshots:

[thmclellan]

After investigating it seems the root cause is how Safari treats body.height of 100%, based on the device's viewport when the user is scrolling, not based on window.innerHeight when tabs/address bar are visible. See https://medium.com/@susiekim9/how-to-compensate-for-the-ios-viewport-unit-bug-46e78d54af0d.

We're using ion-footer to show some essential navigation on a modal in landscape mode. In case it helps anyone else, one workaround is to set body height explicitly based on window.innerHeight. For example, before launching the modal, if the user is on iOS, we're setting body height as follows:

  document.body.style.height = window.innerHeight + 'px'; 

And we'll likely revert back to the previous setting on modal dismiss. Another approach would be to add this logic when first initializing and add a window.onresize event listener.

Repo at https://github.com/thmclellan/ionic-content-test has been updated with this workaround and a toggle button to alternate between natural body height (100%) and explicit height based on window.innerHeight.

Probably worth adding this logic to the core framework for PWA's on iOS. The UX reasons for Safari's handling to 100% height don't seem relevant when working with ion-content and ion-footer.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!