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

AI 生成的摘要

The issue of elastic scrolling on iPads causing the header to unstick from the top of the window is being discussed. simon explains that over-scrolling downwards triggers this issue, which is due to the .docked class being dropped from the body and the header’s position changing from fixed to absolute. A potential fix is to set .d-header { position: fixed; }, but this may interfere with custom headers. codinghorror clarifies that this is not a bug that prevents normal use of Discourse, but rather a minor detail that affects the user experience.

simon proposes a partial fix through a GitHub pull request (PR #3795) and suggests setting .d-header { position: fixed; } as a customization for forums without custom headers. For forums with custom headers, a possible workaround is to set the forum’s body background color to match the custom header’s background for small screens.

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 个赞

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

1 个赞

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

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

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 个赞