[iOS] Layout breaks easily in Landscape mode when ScrollView is wrapped in another layout

[stefanpirkl]

Description

In iOS Landscape mode, if a ScrollView is part of another layout (e.g. a VerticalStackLayout or a Grid), the content breaks to the right side if there's content that reaches the right side of the screen.

For instance, it's possible to break the layout with:

• a Label with long text that needs a word wrap (LineBreakMode doesn't get respected)
• a Line with X2 outside the boundaries of the page (normally, this works without a problem)
• an Image that stretches the whole width

It seems to me the content width isn't correctly calculated on all devices that don't use the whole width in iOS, i.e. all devices with a notch. It works on an iPhone 8.

Possibly related to: https://github.com/dotnet/maui/issues/20042

Steps to Reproduce

1. Create a new .Net MAUI App
2. Wrap the existing content in MainPage.xaml in a <VerticalStackLayout> followed by a <ScrollView>
3. Set a long Text to one of the labels, OR
4. Set a line that reaches outside the content, like so: <Line X1="1" X2="1000" Y1="1" Y2="1"></Line>
5. View the page on iOS in landscape mode

Link to public reproduction project repository

https://github.com/stefanpirkl/bugreport-maui-ios-landscape

Version with bug

8.0.3 GA

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 17 or any iOS device with a notch

Did you find any workaround?

• for Labels: set a MaximumWidthRequest, though this is not ideal
• for Lines: replace with a BoxView
• for Images: also set a MaximumWidthRequest

Relevant log output

No response

[PureWeen]

Can you test with the latest nightly build? https://github.com/dotnet/maui/wiki/Nightly-Builds

[ghost]

Hi @stefanpirkl. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[stefanpirkl]

I'm sorry, I'll try to reproduce the issue until the end of this week!

I'm close to delivering a QA version of our app, so I didn't want to risk ruining my development environment running a nightly build.

[stefanpirkl]

Can you test with the latest nightly build? https://github.com/dotnet/maui/wiki/Nightly-Builds

Yes.

This bug (unfortunately) still occurs on 8.0.10-nightly.10061.

[XamlTest]

Verified this on VS 17.10.0 Preview 2.0(8.0.10). Repro on iOS 17.2 with below Project: iOSLandscapeBug.zip

[stefanpirkl]

Is there any progress on this?

We've had to implement several days of workarounds to a have a layout that is working halfway (which is a compromise because iPhones with rectangular screens behave vastly different than more modern ones).

[albilaga]

Looks like same issue with what I have in https://github.com/dotnet/maui/issues/23773 @stefanpirkl can you use this https://github.com/albilaga/MauiIssues/blob/main/MauiIssues/ScrollViewWidth.xaml.cs#L24 as workaround?