Elastic scrolling on ipad causes header to unstick from top of window

UX
1

Over-scrolling downwards on an ipad causes the header to unstick from the top of the window. If the drop-down menu is open the header will move underneath it.

This is happening because during the over-scroll the .docked class is dropped from the body and the header’s position is changed from fixed to absolute. Setting .d-header { position: fixed; } keeps the header stuck to the top of the window. I’m not sure if doing that causes other problems though.

Edit - setting .d-header to alway have position: fixed interferes with having a custom header.

3 Likes
2

Reminder: “bug” as stated in the description for the category means prevents normal use of Discourse. This certainly does not…

1 Like
3

It’s just a minor detail that makes the website feel like less than an app.

4

Not opposed to addressing the issue, just want to be clear on what a bug is, and where priorities should be.

5

This PR, or something similar, is a partial fix.
https://github.com/discourse/discourse/pull/3795

I am fairly certain that for forums that are not using a custom header it is safe to set
.d-header{position: fixed;} as both a desktop and a mobile customization. That will keep the header fixed to the top of the screen on ios devices.

For forums that do have a custom header, one possible workaround, combined with this PR, is to set the forum’s body background color to match the custom header’s background for small screens.

2 Likes