github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-31 21:45:26 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Extend Safari scrolling fix to work in iPad PWA (#30894)

Browse Source 
Followup to 4933cfd46cf2b30600da9a72bb82d02c19ead8a3
This commit is contained in:
David Taylor
2025-01-21 11:50:38 +00:00
committed by GitHub
parent 184ec95d01
commit 5ac308fe85
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,15 +96,23 @@ export default class GlimmerSiteHeader extends Component {
document.documentElement.getBoundingClientRect().top
);
const headerWrapTop =
this._headerWrap.getBoundingClientRect().top - overscrollPx;
// Tends to be zero, but is set higher when on iPad PWA with the 'footer-navigation' at top of screen
const headerCssTop = parseInt(
window.getComputedStyle(this._headerWrap).getPropertyValue("top"),
10
);
let headerWrapBottom =
this._headerWrap.getBoundingClientRect().bottom - overscrollPx;
// While scrolling on iOS, an element fixed to the top of the screen can have a `top` which fluctuates
// between -1 and 1. To avoid that fluctuation affecting the header offset, we subtract that tiny fluctuation from the bottom value.
if (Math.abs(headerWrapTop) < 1) {
headerWrapBottom -= headerWrapTop;
// While scrolling on iOS, fixed elements can have a viewport position which fluctuates between -1 and 1.
// To avoid that fluctuation affecting the header offset, we subtract that tiny fluctuation from the header-offset.
const headerWrapTopDiff =
this._headerWrap.getBoundingClientRect().top -
overscrollPx -
headerCssTop;
if (Math.abs(headerWrapTopDiff) < 1) {
headerWrapBottom -= headerWrapTopDiff;
}
let mainOutletOffsetTop = Math.max(