-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
Blazor WebView iOS Scrolling Behaves Strangely #6347
Comments
I think this is just how iOS works. With iOS you can draw behind the status bar if that's what you want. I encountered the same and wrote about it here: https://blog.verslu.is/maui/change-maui-ios-status-bar-color/ I am wondering if we should add that to the templates by default, that will also help create a more unified look-and-feel across the different platforms. It will add some platform-specific code. So if we were to add it I think we should have an easy way for users to change the statusbar color. I think there are 3 possible solutions here:
Thoughts? |
Notice the following behavior with the iPhone notch. this boils down to the "safe area" concept introduced with the iPhone X.
MAUI does integrate with this property, however just enabling it, enables padding for all safe areas, which doesn't match our overall formatting style: maui/src/Controls/src/Core/PlatformConfiguration/iOSSpecific/Page.cs Lines 73 to 74 in fe7bc04
From the git history, it looks like @PureWeen initially worked on that functionality. Do you have any tips on how we may be able to integrate Safe Areas within MAUI to prevent WebView content from overlapping the status bar / notch, while avoiding the additional padding on the other sides? I tried manually setting the safe area insets, without luck: var insets = On<iOS>().SafeAreaInsets();
insets.Bottom = 0;
var safeareaPadding = new Thickness(insets.Left, insets.Top, insets.Right, insets.Bottom);
On<iOS>().SetSafeAreaInsets(safeareaPadding);
On<iOS>().SetUseSafeArea(true); PS: From my research, using CSS to get around this issue is discouraged: https://stackoverflow.com/a/39505453/17995448
|
Scratch that last part about CSS; @javiercn pointed out https://webkit.org/blog/7929/designing-websites-for-iphone-x/ which looks like it may help here. |
Note, we aren't able to control the status bar color presently in MAUI; #6159 Thus, to get around the issue with dark content (date/time) and the dark blazor maui sidebar in the status bar: we'd have to add some sort of element at the top to take the place of the status bar. This element should also remain in a fixed / sticky position. This can be achieved either via HTML/CSS or via Xamarin Forms. |
* Blazor Hybrid iOS Safe Areas Fixes: #6347 * Safe Area part 2
This scrolling behavior seems off, likely just a matter of changing viewport settings:
maui/src/Templates/src/templates/maui-blazor/wwwroot/index.html
Line 5 in e79f133
Similar to #4996.
The text was updated successfully, but these errors were encountered: