Repository navigation
Scrollbars and Safearea on iOS #25802
Description
Looking at an iOS native Scrollview (e.g. Safari or Mailbox in Mail) in landscape on an iPhone Xs you will see the following behavior:
- When the notch is on the left, the scrollbar is drawn all the way at the right edge of the screen (the content of the scrollview does not go all the way to the right to avoid potential obtrusion by the round corners)
- When the notch is on the right, the scrollbar is not drawn all the way to the right and instead slightly indented (just like the content) to avoid the notch
I believe I cannot easily replicate this behavior with the Safearea and Scrollbar widget in Flutter. Either the scrollbar is always (regardless of notch orientation) drawn with a padding from the edge of the screen (and would avoid the notch if the phone is orientated to have the notch on the right) or the scrollbar is always drawn all the way at the screen edge (and thus obstructed by the notch if it happened to be on the right side).
Activity
goderbauer commentedon Dec 27, 2018
/cc @xster @cbracken
matthew-carroll commentedon Apr 9, 2019
@goderbauer would you mind posting comparable screenshots showing what we do vs what the standard platform behavior looks like?
tomgilder commentedon Apr 11, 2019
Here's the standard platform behaviour - will show what Flutter does later :-)
Note that this isn't just a landscape thing.
tomgilder commentedon Apr 11, 2019
Note that in the iOS example above, I didn't have to do anything - UIKit provides the behaviour for free by adjusting the scrollIndicatorInsets automatically.
This example wraps the content in a SafeArea:
This one doesn't use a SafeArea, but has padding on the content:
matthew-carroll commentedon Apr 11, 2019
@tomgilder thanks for posting the examples.
CC @xster @LongCatIsLooong
xster commentedon Apr 11, 2019
Leaving this bug open but I think it's mostly a dupe of #13253 where accounting for the MediaQueryData.padding in the thumb paint calculation will solve.
goderbauer commentedon Apr 12, 2019
I think the issue I had was slightly different. Look at the location of the scrollbar in safari: If there is no notch, the scrollbar is as far to the edge of the screen as possible. If there is a notch, the scrollbar is placed with a padding to avoid the notch:
As far as I can tell, there is no way to get that behavior easily in flutter. You either have a padding wether or not there is a notch, or there is never padding and the scrollbar goes through the notch. Example from Flutter gallery:
xster commentedon Apr 16, 2019
You're right, I think there is an additional problem indeed. Looking at iOS, it seems like on opposite side of the notch in landscape mode actually has 2 paddings. The nav bar menus, list cell items, tab bar etc all have one padding and the scrollbar has another.
This could be tricky to handle since we already defined the
paddingandviewInsetmetrics and the framework doesn't have any additional information from the engine to split 2 different types ofpaddingby reading https://developer.apple.com/documentation/uikit/uiview/2891103-safeareainsets.TahaTesser commentedon Mar 13, 2020
Hi @goderbauer
Is this issue still valid?
Thank you
8 remaining items
SaadArdati commentedon Dec 22, 2022
This issue still happens in 2022. In a horizontal iPhone 13, the SafeArea thinks the notch is on the right side when it is on the left side and vice-versa.
shahmirzali49 commentedon Nov 23, 2023
any progress ?