Explore fixed top toolbar on mobile (again)

[frontdevde]

Context

On the navigation block, we ran into an issue with the way the block toolbar behaves on mobile. @mtias suggested that rather than looking at this issue in isolation, it might be worth exploring the topic of having a fixed top toolbar on mobile again.

I'm opening this issue so we can track and discuss any findings in a central location. It seemed like several people might be thinking about this topic at the moment.

Prior exploration

Fixing the toolbar to the top on mobile was an original design intent. Unfortunately, due to issues with Safari on iOS, this was deemed not feasible at the time.

@jasmussen summarised the issues nicely in this comment:

On Mobile Safari, when the soft keyboard shows and/or when the text caret is in text, the viewport moves upwards but is not resized. Additionally, the scroll bounce effect messes with fixed and sticky positionings, meaning that we can't rely on any fixed or sticky element to retain its intended position.

Further related tickets and discussions I came across while digging into this:

#6307 (comment), #6347 (comment), #7479 (comment)

What changed since the last time we looked at this?

Most notably iOS 13 released and with it some changes to how mobile Safari behaves.

https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes

Previously when using the soft-keyboard, instead of reducing the height of the viewport, Safari on iOS would simply push the viewport upwards. The element while still technically being correctly fixed to the top of the viewport was pushed out of view by the soft-keyboard.

This issue is now fixed as @jasmussen showed in this example:

Also, in #18044 @youknowriad is working on refactoring the layout component to separate the UI from the content which according to this comment will hopefully make this change simpler.

What hasn't changed since the last time we looked at this?

One of the issue(s?) that remains is that it is still possible to scroll beyond the end of the viewport. This is caused by the bouncy overscroll behavior we experience on mobile Safari when scrolling beyond the bottom or top of a page. As visible in the example above, this causes whitespace to appear where it shouldn't.

This is still something we would need to solve.

There is a CSS WG specification called CSS Overscroll Behavior Module Level 1 that is designed to address this issue in the future. There's a pretty neat explanation on how this will work in this post on MDN.

Unfortunately, this feature is not supported on mobile Safari at this point. It is however actively being worked on, I found this related ticket on the official bug tracker. In the meantime, if we want to progress on this issue, we'd have to find a different solution to the issue though.