IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Workaround iOS bottom overscroll bug in header-offset calcs (#30895)

Browse Source
This commit is contained in:
David Taylor 2025-01-21 12:23:09 +00:00 committed by GitHub
parent 5ac308fe85
commit 076c0c4bca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
View File

@ -105,7 +105,16 @@ export default class GlimmerSiteHeader extends Component {
let headerWrapBottom = let headerWrapBottom =
this._headerWrap.getBoundingClientRect().bottom - overscrollPx; this._headerWrap.getBoundingClientRect().bottom - overscrollPx;
// While scrolling on iOS, fixed elements can have a viewport position which fluctuates between -1 and 1. // iOS Safari bug: when overscrolling at the bottom of the page on iOS, fixed/sticky elements report their position incorrectly.
// Clamp the headerWrapBottom to the minimum possible value (top + height) to avoid this.
const minimumPossibleHeaderWrapBottom =
headerCssTop + this._headerWrap.getBoundingClientRect().height;
headerWrapBottom = Math.max(
headerWrapBottom,
minimumPossibleHeaderWrapBottom
);
// Safari bug: while scrolling on iOS, fixed elements can have a viewport position which fluctuates by sub-pixel amounts.
// To avoid that fluctuation affecting the header offset, we subtract that tiny fluctuation from the header-offset. // To avoid that fluctuation affecting the header offset, we subtract that tiny fluctuation from the header-offset.
const headerWrapTopDiff = const headerWrapTopDiff =
this._headerWrap.getBoundingClientRect().top - this._headerWrap.getBoundingClientRect().top -