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!

[onmomo]

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.

@AE-MS @TrevorJoelHarris I understand that The MSTeams and Outlook for iOS bottom navigation is different. But since Microsoft allows to use teams apps (manifest >= 1.13) to work on on M365, MS Teams and Outlook and Desktop and web, you should ensure that these platforms behave similar. Implementing edge cases in our integration for every single mobile app Microsoft published or plans to publish in the future will increase the integration efforts significantly and will make us reevaluate if this is actually worth the investment.

We were not able to make the suggested dvh workaround since we are using vuetify framework and refrain from reimplementing and testing our UI on all platform again just to make it work on the Outlook mobile app.

[AE-MS]

I've relayed your response to the Outlook team and they'll get back to us next week to ensure they're aligned on the path forward.

[onmomo]

@AE-MS Three weeks have been past since, could we please reopen this issue? Just go back a test report from the teamsub teams, highlighting more issue due to this implementation details on Outlook Mobile app.

[jekloudaMSFT]

Hi @onmomo, I'm following up with the Outlook team. Can you please share more details on the other issues you're running into? Are they more scenarios that are being blocked by the navigation bar?

[onmomo]

@jekloudaMSFT We can't correctly identify the viewport height with the current implementation of the iOS outlook navigation. This leads to all kinds of UX issues reported by the teamssub team. I don't think it makes a lot of sense to share more screenshots of the Outlook navigation overlapping our app in different views. The main issue is, that iOS Outlook did implement the navigation bar in a way that prevents ISVs to provide cross support for Teams Mobile and Outlook mobile. Further details can be found in this comment

• iOS Outlook - app bottom navigation overlaps view port #2222 (comment)

this is not solved and was just highlighted again by teamsubm team, blocking again our app validation, please reopen.

[TechL3ad]

@onmomo Can you send your manifest file to me (maxiao@microsoft.com)? Just want to test it locally to see what's going on

[ChetanSharma-msft]

Hello @onmomo - Please confirm if you have already shared the manifest file to test?

[onmomo]

@ChetanSharma-msft @TechL3ad I still need to isolate the problem in order to share a manifest. Will get back to you

[sakov-ms]

Closing this for now.

[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