Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS] StatusBarBehavior does not occupy entire notch - fix #2309

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

kubaflo
Copy link

@kubaflo kubaflo commented Oct 30, 2024

Description of Change

I've encountered this bug while working with MAUI: dotnet/maui#24972 and it turns out that it is rather an issue that should be linked to this repository.

Basically the status bar is wrong for some screens. I've found this comments here: https://forums.developer.apple.com/forums/thread/662466

Screenshot 2024-10-30 at 19 33 40

It makes sense because when I based the status bar height on the top safe area I have the following result:

Expected Before After

Linked Issues

It might also fix this one: dotnet/maui#25435, but I'm not 100% sure if it is a status bar's or MAUI's issue. Maybe even both

PR Checklist

  • Has a linked Issue, and the Issue has been approved(bug) or Championed (feature/proposal)
  • Has tests (if omitted, state reason in description)
  • Has samples (if omitted, state reason in description)
  • Rebased on top of main at time of PR
  • Changes adhere to coding standard
  • Documentation created or updated: https://github.com/MicrosoftDocs/CommunityToolkit/pulls

Additional information

pictos
pictos previously approved these changes Oct 30, 2024
Copy link
Member

@pictos pictos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@brminnick
Copy link
Collaborator

brminnick commented Oct 30, 2024

The StatusBar overlaps the navigation bar in the After photo.

To help visualize this, I've added a green bar in the photo below that is the same height as the NavigationBar. The green bar is the same height in both the Before and After image.

Screenshot 2024-10-30 at 11 56 09 AM

Copy link
Collaborator

@brminnick brminnick left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please link to a bug (or open a new Issue) in our GitHub repo to help us understand + reproduce the problem you are trying to fix.

Please also update edit the title of this PR; Improve status bar does not explain the bug or the proposed solution.

Please ensure the status bar does not overlap the navigation bar

Screenshot 2024-10-30 at 11 56 09 AM

@brminnick brminnick dismissed pictos’s stale review October 30, 2024 19:01

This PR increases the size of the StatusBar where it now overlaps the NavigationBar

@kubaflo
Copy link
Author

kubaflo commented Oct 30, 2024

Please link to a bug (or open a new Issue) in our GitHub repo to help us understand + reproduce the problem you are trying to fix.

Please also update edit the title of this PR; Improve status bar does not explain the bug or the proposed solution.

Please ensure the status bar does not overlap the navigation bar

Screenshot 2024-10-30 at 11 56 09 AM

Yea, but it is the iOS's native behaviour. Generally status bar should have the same color as the navigation bar. The only point for customising it is when we don't have a navigation bar. And the current MCT solution would give the following outcome:

Screenshot 2024-10-30 at 20 09 22

@Axemasta
Copy link
Contributor

Please link to a bug (or open a new Issue) in our GitHub repo to help us understand + reproduce the problem you are trying to fix.

This is the issue #2287, Originally I thought it was a maui issue but its not and actually a status bar behaviour issue, since the repro app doesn't apply the padding when not using the behavior

@kubaflo kubaflo changed the title [iOS] Improve status bar [iOS] StatusBarBehavior does not occupy entire notch for modal pages when NavigationPage.HasNavigationBar="False" - fix Oct 30, 2024
@kubaflo kubaflo changed the title [iOS] StatusBarBehavior does not occupy entire notch for modal pages when NavigationPage.HasNavigationBar="False" - fix [iOS] StatusBarBehavior does not occupy entire notch - fix Oct 30, 2024
@jfversluis
Copy link
Member

Another report of this bug: dotnet/maui#25435

Additionally I also ran into this myself while working on the https://github.com/jfversluis/blazor-hybrid-workshop

@kubaflo
Copy link
Author

kubaflo commented Nov 21, 2024

Hi! Any update concerning this PR?

@kubaflo kubaflo requested a review from brminnick November 21, 2024 12:16
@pictos
Copy link
Member

pictos commented Nov 21, 2024

@brminnick what do you think about @kubaflo's answer?

@brminnick
Copy link
Collaborator

This is a tough one. Both the Community Toolkit and .NET MAUI are correctly using SafeAreaInserts. This appears to be how iOS has designed their operating system UI.

I've searched Apple's Human Interface Design Guidelines to learn more about their recommendations around the status bar and modality, but they don't provide any specific instructions.

Since this "bug" only seems to affect Modal Pages, my recommendation is to use PageSheet for modal all modal pages on iOS. I've provided the code here: #2287 (comment)

My vote is to close both this PR and the Issue as this is the design that Apple is pushing us developers into.

@brminnick
Copy link
Collaborator

Hi! Any update concerning this PR?

To answer @kubaflo's question, we are blocked from merging any PRs until we are able to merge our .NET 9 PR which is currently blocked by a bug in .NET MAUI.

Once the MAUI engineering team resolves this bug, we will be unblocked and can resume merging PRs for the Community Toolkit: dotnet/maui#25871

@kubaflo
Copy link
Author

kubaflo commented Nov 22, 2024

Okay, @brminnick do whatever you think is the best :) But I don't think it happens only on modal pages, it happens on pages without a navigation bar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
5 participants