iOS Outlook - app bottom navigation overlaps view port

[onmomo]

We experienced the following issue with the iOS Outlook app.

iOS Outlook app

The apply (ANWENDEN) button is positioned so that it is always visible at the end of the user’s view. This means that if there is a bottom navigation/toolbar visible it should be shown above it.
CSS implementation details:
The component becomes fill screen by applying height: 100%
It consists of three divs - one for the header, one for the content and one for the footer with the buttons ()
The content div applies flex-grow: 1 to keep the content positioned at the top below the header.

We can't reproduce this with the Teams iOS mobile app, where the mobile app bottom navigation is excluded from the 100% viewport, which is what we expect.

iOS Teams app

The same issue can be seen on other parts, that rely on the iOS Outlook bottom navigation bar being excluded from the visible viewport.

iOS Outlook app

Please advise, this blocks our teams app store validation.

[ChetanSharma-msft]

Hello @onmomo - Could you please share the repro steps or let us know if we can test any existing 1st party app to repro your issue?

[ErythroME]

Hi @onmomo, you can fix the height issue in Outlook iOS by using CSS 100dvh (with fallback for compatibility https://caniuse.com/mdn-api_css_dvh_static) as body height.

[onmomo]

Hi @onmomo, you can fix the height issue in Outlook iOS by using CSS 100dvh (with fallback for compatibility https://caniuse.com/mdn-api_css_dvh_static) as body height.

Thanks a lot @ErythroME. We will definitely look into this. Looks promising (https://blog.logrocket.com/improving-mobile-design-latest-css-viewport-units/#dynamic-viewport-units). We're not sure yet if vuetify does support it, though.

[sakov-ms]

Thank you @onmomo for raising this issue. Do try out the solution proposed by @ErythroME and let us know if that works.

[onmomo]

@ErythroME @sakov-ms
We verified the suggestion internally and found that it won't resolve the reported issue. We leverage vuetifyjs that should deal with mobile webviews, correctly
Please find our tests with chrome and edge mobile.

Chrome Mobile

Edge Mobile

Since our implementation also works flawlessly in MS Teams mobile app, this still looks like an issue on MS Outlook mobile app. We cannot even implement a workaround that would look good for MS Teams mobile and MS Outlook mobile since later does somehow prevent to detect the correct viewport height.
Please check this internally.

[sakov-ms]

Thank you for this detailed investigation. We are checking this issue and will provide updates soon.

[AE-MS]

Here's what the Outlook team said about this issue:

The implementation works differently for MS Teams and Outlook for iOS because by design there are differences in the
bottom navigation. Teams's bottom navigation bar does not cover & blur the underlying website, but Outlook for iOS does. Therefore using dvh is the preferred implementation for current support; changing the behavior on Outlook for iOS will also cause regression on other Apps therefore currently there is no plan to change the behavior on Outlook. Using CSS 100dvh (with fallback for compatibility https://caniuse.com/mdn-api_css_dvh_static) as body height should be able to workaround this issue, if it doesn’t work please post example CSS code using the dvh property for us to investigate.

[TrevorJoelHarris]

I'm going to close this due to inactivity from the original reporter. @onmomo if you still have questions or problems feel free to re-open this or open a new issue and we will do our best to help!

[microsoft-github-policy-service]

Tell us about your experience!

Hi onmomo! We have closed this issue in our system, but we would love to hear your feedback. To let us know how we did, simply use one of the following emoji icons: 👍 for resolved, 👎 for unresolved, or ❤️ for a great experience on this message. Please use the link for more detailed feedback.

Best regards,
Teams Platform