Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Explore fixed top toolbar on mobile (again) #18632
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.
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.
Further related tickets and discussions I came across while digging into this:
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.
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:
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.