Shell tab bar overflows the content of the page when navigating back through Interactive Pop Gesture [iOS]

Hooterr commented 1 year ago

Description

If you navigate from a page that has tab bar visible to a page that has TabBarIsVisible="False" and back, the page with tab bar will be covered by the tab bar. This only seems to happen if you go back by swiping the page (drag from the left edge to the right) instead of pressing the back button. Look at the attached video.

The title and back button text update with a delay but that I believe is a known issue.

Although it may not seem critical I would still categorize this issue as a high priority. It makes the overall quality of the apps we deliver to our customers lower and looks unprofessional.

https://github.com/dotnet/maui/assets/28758721/9696a940-ed5f-4c00-b11e-6e38358a20af

Steps to Reproduce

Navigate back by swiping the page instead of pressing the back button.

Link to public reproduction project repository

https://github.com/Hooterr/MauiTabBarNavigationBug

Version with bug

7.0.92

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.5

Did you find any workaround?

No

Relevant log output

No response

Hooterr commented 1 year ago

CC @PureWeen your workaround library is also affected by this bug.

Hooterr commented 1 year ago

Workaround (sort of) Subclass ShellSectionRenderer override ViewDidLoad() and set InteractivePopGestureRecognizer.Enabled = false;

This just disables the pop gesture. Not ideal, but at least you don't get broken UI.

LennoxP90 commented 9 months ago

this is an issue with .net 8.0

MichaelShapiro commented 9 months ago

I'm seeing different result in .net 8.0. When navigating "Back" from the page with no tab bar to the page with bottom tab bar - the content of the destination page jumps up and eventually renders correctly. The jumping is not nice but better than before (net 7.0) when the bottom of the page remained covered by the tab ar. Here is my environment:

https://github.com/dotnet/maui/assets/36049508/b0af6b45-138d-4d2e-8216-c40535b15e7e

Hooterr commented 9 months ago

Weirdly enough I observed that the Height value on the page is the same whether the tab bar is shown or not. But the page seems to laying out correctly.

Zhanglirong-Winnie commented 7 months ago

Verified this issue with Visual Studio Enterprise 17.9.0 Preview 5. Can repro on iOS platform with sample project. https://github.com/Hooterr/MauiTabBarNavigationBug

Divyesh-Bhatt commented 4 months ago

Workaround (sort of) Subclass ShellSectionRenderer override ViewDidLoad() and set InteractivePopGestureRecognizer.Enabled = false;

This just disables the pop gesture. Not ideal, but at least you don't get broken UI.

@Hooterr this will disabled the Swipe back navigation for entire app in iOS. How to make the InteractivePopGestureRecognizer disable for specific page?

LennoxP90 commented 4 months ago

this is still an issue and the workaround doesn't fix it

smalgin commented 2 months ago

Same issue - returning back to the same page via navigation triggers it too. :(

bdl3700 commented 2 weeks ago

I'm encountering this same issue, I have a tabbed page whose root doesn't display the Tab bar. When the app finishes loading and another page is pushed to the navigation stack the bottom ≈ 85 units of content are covered by the Tab bar.

Environment: Dotnet 8.0.204 iOS workload version: 17.2.8053 Maui workload version: 8.0.7

dotnet / maui