Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explore fixed top toolbar on mobile (again) #18632

Closed
frontdevde opened this issue Nov 20, 2019 · 0 comments · Fixed by #18686
Closed

Explore fixed top toolbar on mobile (again) #18632

frontdevde opened this issue Nov 20, 2019 · 0 comments · Fixed by #18686

Comments

@frontdevde
Copy link
Contributor

@frontdevde frontdevde commented Nov 20, 2019

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.

43766357-7fca8240-9a32-11e8-87fa-3df589b6e112

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:

ezgif com-resize

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.