Bug 228278 – iOS 15 scrollable containers cannot take up full height of screen

• Status: RESOLVED
• Resolution: WONTFIX
• Component: CSS

[Liam DeBeasi]

Created attachment 434205 [details]
Code reproduction

When using a non-body scrollable container, the container does not take up the full viewport height, resulting in a white space below the floating tab bar in Safari 15. This issue happens even when setting the container's height to 100vh.

Steps to reproduce:
1. Open attached code reproduction on a device running the latest iOS 15 beta. I tested this using beta 3.
2. Observe that there is a scrollable container with text with an empty area below the floating url bar.


Expected Behavior:
Given that the height of the container is 100vh, I would expect the scrollable container to extend beyond the url bar.


Actual Behavior:
The container does not extend beyond the url bar, resulting in an empty space below the url bar.


Other information:
- When setting the height of the container to a fixed value (I.e. height: 800px or similar), the container extends beyond the url bar as expected.
- This issue does not reproduce when the body is the scrollable container.
- I believe this was working previously in beta 1. I had a WWDC session with a Safari team member where they recommended I use 100vh, but that fix no longer works in beta 3.

[Radar WebKit Bug Importer]

<rdar://problem/81178310>

[Liam DeBeasi]

Created attachment 438073 [details]
Revised code reproduction

With iOS 15 beta 7 the reported behavior has changed. The non-body container can now take up the full viewport height; however, there are a few new behaviors that I consider to be unexpected/undesirable:

1. The URL bar collapses when scrolling down but never expands when scrolling back up.
2. Adding a sticky footer causes it to hidden by the URL bar when expanded. This does not happen when scrolling on the body. Trying to offset the sticky footer using env(safe-area-inset-bottom) has no effect.

I have attached a new code reproduction that shows the two issues.

[Liam DeBeasi]

Created attachment 440788 [details]
Video of reproduction on iOS 15.1 beta

[Liam DeBeasi]

This behavior seems to be broken again on the iOS 15.1 developer beta.

The URL bar no longer collapses when scrolling down, and there is always content off screen. Additionally if you scroll to the bottom, and then scroll again you will see two overlapping scrollbars. In this case, it looks like the non-body scrollable container and the body are both scrollable. I cannot reproduce this in iOS 15.0

I have attached a video of the issue on an iPhone 13 running iOS 15.1. The code reproduction is the same.

[Liam DeBeasi]

After discussing with the WebKit team on Slack, this sounds like the intended behavior, so I am going to close this. Thank you!