Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: Calculate header offset once on load (#18669) 

Multiple things in the app need the height of the header to be correct (for example, scrolling to a post), so we need the header offset calculation. However, we shouldn't be calculating it on scroll, it's too resource intensive and it causes flickering on iPads (and possible other devices too).

This commit removes header offset calculation on scroll and adds a one-time calculation as soon as the header is first rendered. This ensures that users get scrolled to the correct post even if they open it in a new tab.
This commit is contained in:
Penar Musaraj 2022-10-19 12:07:44 -04:00 committed by GitHub
parent 58e59e3579
commit a96f22cd67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/javascripts/discourse/app/components/site-header.js
View File

@ -177,19 +177,6 @@ const SiteHeaderComponent = MountWidget.extend(
this.docAt = header.offsetTop;
}
const headerRect = header.getBoundingClientRect();
let headerOffsetCalc = headerRect.top + headerRect.height;
if (window.scrollY < 0) {
headerOffsetCalc += window.scrollY;
}
const newValue = `${headerOffsetCalc}px`;
if (newValue !== this.currentHeaderOffsetValue) {
this.currentHeaderOffsetValue = newValue;
document.documentElement.style.setProperty("--header-offset", newValue);
}
const main = document.querySelector(".ember-application");
const offsetTop = main ? main.offsetTop : 0;
const offset = window.pageYOffset - offsetTop;
@ -520,9 +507,17 @@ export default SiteHeaderComponent.extend({
didInsertElement() {
this._super(...arguments);
if ("ResizeObserver" in window) {
const header = document.querySelector(".d-header-wrap");
const header = document.querySelector(".d-header-wrap");
if (header) {
schedule("afterRender", () => {
document.documentElement.style.setProperty(
"--header-offset",
`${header.offsetHeight}px`
);
});
}
if ("ResizeObserver" in window) {
this._resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
if (entry.contentRect) {