Chin on iOS

[bitfl0wer]

Describe the bug

The latest version of Sable as a PWA on my iOS device has gained a chin that is quite not nice :/

Reproduction

No response

Expected behavior

No response

Platform and versions

- OS: iPhone
- Browser: Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/27.0 Mobile/15E148 Safari/604.1
- Sable: v1.21.0 (7675aa1)

Additional context

No response

[bitfl0wer]

Manifests as this white border on the bottom of the display area.

[Septicity]

This "chin", in theory, covers the area encompassed by the navigation bar on iOS; If we didn't have a gap there, we would have no way to override the OS's native gestures if you attempted to press a button within its range.

I believe the thing that determines the color within that zone (and in the status bar) is determined by CSS, but I don't know if that supports gradients, so I'm not sure if there's much of a solution for you here.

Given the limitations and my understanding of the issue, I'd say it's safe to close for now, but definitely feel free to do research and reach out to us if I'm wrong about it!

[bitfl0wer]

This seemed to have only been a thing in the latest update. Before that, there were no such issues or layout shifts

[Septicity]

I suppose that's true. I just checked 4d2's instance on 1.20.0, and I can confirm what you're saying.

I still personally believe that having the gap for the navigation bar is ideal (since, in my testing, tapping the very bottom of the screen around the center will activate the navigation bar instead, unless the target is a link, like in the login screen)...

But, since there is a tangible difference in behavior, I'll consider it to have not been my business to close.

[bitfl0wer]

I do think the gap is pleasant UX-wise. I do, however, think that it could just be themed in the same color(s) as the regular background of the app. Sable feels great to use as a PWA! This is currently the most major point that sticks out for me.

[Septicity]

The main issue there is that I'm not sure it's possible to color the top and bottom bars separately, and there are many views within the app that have different top and bottom colors.

That said, I've noticed that the bar goes away at random points in my own testing, so I'm not sure if it was an intentional change...