Strange Rendering-Bug im Firefox
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Fixe Hintergründe mit Transparenz – die Grafikkarte will ja was zu tun haben. Oder läuft das gar über die CPU? Dem Lüfter soll’s egal sein, für wen er rotieren muss. Die angesprochene JavaScript-Lösung könnte performanter sein.
Gesagt, getan.
Um auf dynamische Änderungen zu reagieren, ist wohl JavaScript das bessere Mittel der Wahl. Irgendwelche clevere CSS-Verrenkungen mögen zwar funktionieren, aber wenn man nach 3 Tagen selbst nicht mehr weiß, warum sie das tun, sind sie doch nicht so clever.
Also einen [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) genommen und damit eine Klasse `"scrolled"` am `body`- oder `html`-Element gesetzt bzw. gelöscht. (Mit JavaScript wird nicht direkt an CSS-Eigenschaften rumgefummelt!)
Zunächst hatte ich die Tabellenüberschrift unter Beobachtung: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: `-${document.querySelector('header').offsetHeight + 36}px` }
);
intersectionObserver.observe(document.querySelector('caption'));
```
Besonders unschön daran ist, dass damit nicht auf mögliche spätere Änderungen der Höhe des Headers reagiert wird.
Besser wäre es, ein Element im Auge zu haben, das sich ganz am Anfang der Seite befindet und mitscrollt. Der `header` und seine Nachfahren scheiden wegen `position: sticky` aus.
Ich war schon drauf und dran, ein leeres `div` vor den `header` zu setzen …
Moment! Da ist ja schon ein Element ganz am Anfang der Seite: `head`!!! *(Drei Ausrufezeichen. Nein, ich bin nicht verrückt.)* Um den im Auge zu haben muss man ihn nur sichtbar machen:
```css
head { display: block }
head > * { display: none }
```
und dann kann man ihn auch observieren: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: '36px' }
);
intersectionObserver.observe(document.head);
```
---
Und wo ich gerade an Observern dran war, hab ich die Überwachung der Höhe des Headers auch auf [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) umgestellt. Ich nehme stark an, dass die Browser das mindestens ebenso performant – vermutlich sogar besser – implementiert haben als wenn man selbst [Debouncing oder Throttling](https://bencentra.com/code/2015/02/27/optimizing-window-resize.html) implementieren würde.
Vorher:
```js
const debouncingDelay = 250;
const headerElement = document.querySelector('header');
let timeout;
const refreshHeaderHeight = () => {
document.documentElement.style.setProperty(
'--header-height', `${headerElement.offsetHeight}px`
);
console.log(`${headerElement.offsetHeight}px`);
};
window.addEventListener('resize', () => {
clearTimeout(timeout);
timeout = setTimeout(refreshHeaderHeight, debouncingDelay);
});
refreshHeaderHeight();
```
Nachher:
```js
const resizeObserver = new ResizeObserver(entries => {
document.documentElement.style.setProperty(
'--header-height', `${entries[0].target.offsetHeight}px`
);
});
resizeObserver.observe(document.querySelector('header'));
```
*Amazing discovery*.{:@en} Zu sehen bspw. bei [Discovery](https://bittersmann.de/startrek/series/dsc) *(pun intended)*{:@en}.
🖖 Живи довго і процвітай
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix
Strange Rendering-Bug im Firefox
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Fixe Hintergründe mit Transparenz – die Grafikkarte will ja was zu tun haben. Oder läuft das gar über die CPU? Dem Lüfter soll’s egal sein, für wen er rotieren muss. Die angesprochene JavaScript-Lösung könnte performanter sein.
Gesagt, getan.
Um auf dynamische Änderungen zu reagieren, ist wohl JavaScript das bessere Mittel der Wahl. Irgendwelche clevere CSS-Verrenkungen mögen zwar funktionieren, aber wenn man mach 3 Tagen selbst nicht mehr weiß, warum sie das tun, sind sie doch nicht so clever.
Also einen [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) genommen und damit eine Klasse `"scrolled"` am `body`- oder `html`-Element gesetzt bzw. gelöscht. (Mit JavaScript wird nicht direkt an CSS-Eigenschaften rumgefummelt!)
Zunächst hatte ich die Tabellenüberschrift unter Beobachtung: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: `-${document.querySelector('header').offsetHeight + 36}px` }
);
intersectionObserver.observe(document.querySelector('caption'));
```
Besonders unschön daran ist, dass damit nicht auf mögliche spätere Änderungen der Höhe des Headers reagiert wird.
Besser wäre es, ein Element im Auge zu haben, das sich ganz am Anfang der Seite befindet und mitscrollt. Der `header` und seine Nachfahren scheiden wegen `position: sticky` aus.
Ich war schon drauf und dran, ein leeres `div` vor den `header` zu setzen …
Moment! Da ist ja schon ein Element ganz am Anfang der Seite: `head`!!! *(Drei Ausrufezeichen. Nein, ich bin nicht verrückt.)* Um den im Auge zu haben muss man ihn nur sichtbar machen:
```css
head { display: block }
head > * { display: none }
```
und dann kann man ihn auch observieren: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: '36px' }
);
intersectionObserver.observe(document.head);
```
---
Und wo ich gerade an Observern dran war, hab ich die Überwachung der Höhe des Headers auch auf [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) umgestellt. Ich nehme stark an, dass die Browser das mindestens ebenso performant – vermutlich sogar besser – implementiert haben als wenn man selbst [Debouncing oder Throttling](https://bencentra.com/code/2015/02/27/optimizing-window-resize.html) implementieren würde.
Vorher:
```js
const debouncingDelay = 250;
const headerElement = document.querySelector('header');
let timeout;
const refreshHeaderHeight = () => {
document.documentElement.style.setProperty(
'--header-height', `${headerElement.offsetHeight}px`
);
console.log(`${headerElement.offsetHeight}px`);
};
window.addEventListener('resize', () => {
clearTimeout(timeout);
timeout = setTimeout(refreshHeaderHeight, debouncingDelay);
});
refreshHeaderHeight();
```
Nachher:
```js
const resizeObserver = new ResizeObserver(entries => {
document.documentElement.style.setProperty(
'--header-height', `${entries[0].target.offsetHeight}px`
);
});
resizeObserver.observe(document.querySelector('header'));
```
*Amazing discovery*.{:@en} Zu sehen bspw. bei [Discovery](https://bittersmann.de/startrek/series/dsc) *(pun intended)*{:@en}.
🖖 Живи довго і процвітай
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix
Strange Rendering-Bug im Firefox
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Fixe Hintergründe mit Transparenz – die Grafikkarte will ja was zu tun haben. Oder läuft das gar über die CPU? Dem Lüfter soll’s egal sein, für wen er rotieren muss. Die angesprochene JavaScript-Lösung könnte performanter sein.
Gesagt, getan.
Um auf dynamische Änderungen zu reagieren, ist wohl JavaScript das bessere Mittel der Wahl. Irgendwelche clevere CSS-Verrenkungen mögen zwar funktionieren, aber wenn man mach 3 Tagen selbst nicht mehr weiß, warum sie das tun, sind sie doch nicht so clever.
Also einen [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) genommen und damit eine Klasse `"scrolled"` am `html`-Element gesetzt bzw. gelöscht. (Mit JavaScript wird nicht direkt an CSS-Eigenschaften rumgefummelt!)
Zunächst hatte ich die Tabellenüberschrift unter Beobachtung: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: `-${document.querySelector('header').offsetHeight + 36}px` }
);
intersectionObserver.observe(document.querySelector('caption'));
```
Besonders unschön daran ist, dass damit nicht auf mögliche spätere Änderungen der Höhe des Headers reagiert wird.
Besser wäre es, ein Element im Auge zu haben, das sich ganz am Anfang der Seite befindet und mitscrollt. Der `header` und seine Nachfahren scheiden wegen `position: sticky` aus.
Ich war schon drauf und dran, ein leeres `div` vor den `header` zu setzen …
Moment! Da ist ja schon ein Element ganz am Anfang der Seite: `head`!!! *(Drei Ausrufezeichen. Nein, ich bin nicht verrückt.)* Um den im Auge zu haben muss man ihn nur sichtbar machen:
```css
head { display: block }
head > * { display: none }
```
und dann kann man ihn auch observieren: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: '36px' }
);
intersectionObserver.observe(document.head);
```
---
Und wo ich gerade an Observern dran war, hab ich die Überwachung der Höhe des Headers auch auf [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) umgestellt. Ich nehme stark an, dass die Browser das mindestens ebenso performant – vermutlich sogar besser – implementiert haben als wenn man selbst [Debouncing oder Throttling](https://bencentra.com/code/2015/02/27/optimizing-window-resize.html) implementieren würde.
Vorher:
```js
const debouncingDelay = 250;
const headerElement = document.querySelector('header');
let timeout;
const refreshHeaderHeight = () => {
document.documentElement.style.setProperty(
'--header-height', `${headerElement.offsetHeight}px`
);
console.log(`${headerElement.offsetHeight}px`);
};
window.addEventListener('resize', () => {
clearTimeout(timeout);
timeout = setTimeout(refreshHeaderHeight, debouncingDelay);
});
refreshHeaderHeight();
```
Nachher:
```js
const resizeObserver = new ResizeObserver(entries => {
document.documentElement.style.setProperty(
'--header-height', `${entries[0].target.offsetHeight}px`
);
});
resizeObserver.observe(document.querySelector('header'));
```
*Amazing discovery*.{:@en} Zu sehen bspw. bei [Discovery](https://bittersmann.de/startrek/series/dsc) *(pun intended)*{:@en}.
🖖 Живи довго і процвітай
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix
Strange Rendering-Bug im Firefox
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Fixe Hintergründe mit Transparenz – die Grafikkarte will ja was zu tun haben. Oder läuft das gar über die CPU? Dem Lüfter soll’s egal sein, für wen er rotieren muss. Die angesprochene JavaScript-Lösung könnte performanter sein.
Gesagt, getan.
Um auf dynamische Änderungen zu reagieren, ist wohl JavaScript das bessere Mittel der Wahl. Irgendwelche clevere CSS-Verrenkungen mögen zwar funktionieren, aber wenn man mach 3 Tagen selbst nicht mehr weiß, warum sie das tun, sind sie doch nicht so clever.
Also einen [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) genommen und damit eine Klasse `"scrolled"` am `html`-Element gesetzt bzw. gelöscht. (Mit JavaScript wird nicht direkt an CSS-Eigenschaften rumgefummelt!)
Zunächst hatte ich die Tabellenüberschrift unter Beobachtung: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: `-${document.querySelector('header').offsetHeight + 36}px` }
);
intersectionObserver.observe(document.querySelector('caption'));
```
Besonders unschön daran ist, dass damit nicht auf mögliche spätere Änderungen der Höhe des Headers reagiert wird.
Besser wäre es, ein Element im Auge zu haben, das sich ganz am Anfang der Seite befindet und mitscrollt. Der `header` und seine Nachfahren scheiden wegen `position: sticky` aus.
Ich war schon drauf und dran, ein leeres `div` vor den `header` zu setzen …
Moment! Da ist ja schon ein Element ganz am Anfang der Seite: `head`!!! *(Drei Ausrufezeichen. Nein, ich bin nicht verrückt.)* Um den im Auge zu haben muss man ihn nur sichtbar machen:
```css
head { display: block }
head > * { display: none }
```
und dann kann man ihn auch observieren: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: '36px' }
);
intersectionObserver.observe(document.head);
```
---
Und wo ich gerade an Observern dran war, hab ich die Überwachung der Höhe des Headers auch auf [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) umgestellt. Ich nehme stark an, dass die Browser das mindesten ebenso performant – vermutlich sogar besser – implementiert haben als wenn man selbst [Debouncing oder Throttling](https://bencentra.com/code/2015/02/27/optimizing-window-resize.html) implementieren würde.
Vorher:
```js
const debouncingDelay = 250;
const headerElement = document.querySelector('header');
let timeout;
const refreshHeaderHeight = () => {
document.documentElement.style.setProperty(
'--header-height', `${headerElement.offsetHeight}px`
);
console.log(`${headerElement.offsetHeight}px`);
};
window.addEventListener('resize', () => {
clearTimeout(timeout);
timeout = setTimeout(refreshHeaderHeight, debouncingDelay);
});
refreshHeaderHeight();
```
Nachher:
```js
const resizeObserver = new ResizeObserver(entries => {
document.documentElement.style.setProperty(
'--header-height', `${entries[0].target.offsetHeight}px`
);
});
resizeObserver.observe(document.querySelector('header'));
```
*Amazing discovery*.{:@en} Zu sehen bspw. bei [Discovery](https://bittersmann.de/startrek/series/dsc) *(pun intended)*{:@en}.
🖖 Живи довго і процвітай
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix
Strange Rendering-Bug im Firefox
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Fixe Hintergründe mit Transparenz – die Grafikkarte will ja was zu tun haben. Oder läuft das gar über die CPU? Dem Lüfter soll’s egal sein, für wen er rotieren muss. Die angesprochene JavaScript-Lösung könnte performanter sein.
Gesagt, getan.
Um auf dynamische Änderungen zu reagieren, ist wohl JavaScript das bessere Mittel der Wahl. Irgendwelche clevere CSS-Verrenkungen mögen zwar funktionieren, aber wenn man mach 3 Tagen selbst nicht mehr weiß, warum sie das tun, sind sie doch nicht so clever.
Also einen [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) genommen und damit eine Klasse `"scrolled"` am `html`-Element gesetzt bzw. gelöscht. (Mit JavaScript wird nicht direkt an CSS-Eigenschaften rumgefummelt!)
Zunächst hatte ich die Tabellenüberschrift unter Beobachtung: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: `-${document.querySelector('header').offsetHeight + 36}px` }
);
intersectionObserver.observe(document.querySelector('caption'));
```
Besonders unschön daran ist, dass damit nicht auf mögliche spätere Änderungen der Höhe des Headers reagiert wird.
Besser wäre es, ein Element im Auge zu haben, das sich ganz am Anfang der Seite befindet und mitscrollt. Der `header` und seine Nachfahren scheiden wegen `position: sticky` aus.
Ich war schon drauf und dran, ein leeres `div` vor den `header` zu setzen …
Moment! Da ist ja schon ein Element ganz am Anfang der Seite: `head`!!! *(Drei Ausrufezeichen. Nein, ich bin nicht verrückt.)* Um den im Auge zu haben muss man ihn nur sichtbar machen:
```css
head { display: block }
head > * { display: none }
```
und dann kann man ihn auch observieren: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: '36px' }
);
intersectionObserver.observe(document.head);
```
---
Und wo ich gerade an Observern dran war, hab ich die Überwachung der Höhe des Headers auch auf [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) umgestellt. Ich nehme stark an, dass die Browser das mindesten ebenso performant – vermutlich sogar besser – implmentiert haben als wenn man selbst [Debouncing oder Throttling](https://bencentra.com/code/2015/02/27/optimizing-window-resize.html) implementieren würde.
Vorher:
```js
const debouncingDelay = 250;
const headerElement = document.querySelector('header');
let timeout;
const refreshHeaderHeight = () => {
document.documentElement.style.setProperty(
'--header-height', `${headerElement.offsetHeight}px`
);
console.log(`${headerElement.offsetHeight}px`);
};
window.addEventListener('resize', () => {
clearTimeout(timeout);
timeout = setTimeout(refreshHeaderHeight, debouncingDelay);
});
refreshHeaderHeight();
```
Nachher:
```js
const resizeObserver = new ResizeObserver(entries => {
document.documentElement.style.setProperty(
'--header-height', `${entries[0].target.offsetHeight}px`
);
});
resizeObserver.observe(document.querySelector('header'));
```
*Amazing discovery*.{:@en} Zu sehen bspw. bei [Discovery](https://bittersmann.de/startrek/series/dsc) *(pun intended)*{:@en}.
🖖 Живи довго і процвітай
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix
Strange Rendering-Bug im Firefox
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Fixe Hintergründe mit Transparenz – die Grafikkarte will ja was zu tun haben. Oder läuft das gar über die CPU? Dem Lüfter soll’s egal sein, für wen er rotieren muss. Die angesprochene JavaScript-Lösung könnte performanter sein.
Gesagt, getan.
Um auf dynamische Änderungen zu reagieren, ist wohl JavaScript das bessere Mittel der Wahl. Irgendwelche clevere CSS-Verrenkungen mögen zwar funktionieren, aber wenn man mach 3 Tagen selbst nicht mehr weiß, warum sie das tun, sind sie doch nicht so clever.
Also einen [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) genommen und damit eine Klasse `"scrolled"` am `html`-Element gesetzt bzw. gelöscht. (Mit JavaScript wird nicht direkt an CSS-Eigenschaften rumgefummelt!)
Zunächst hatte ich die Tabellenüberschrift unter Beobachtung: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: `-${document.querySelector('header').offsetHeight + 36}px` }
);
intersectionObserver.observe(document.querySelector('caption'));
```
Besonders unschön daran ist, dass damit nicht auf mögliche spätere Änderungen der Höhe des Headers reagiert wird.
Besser wäre es, ein Element im Auge zu haben, das sich ganz am Anfang der Seite befindet und mitscrollt. Der `header` und seine Nachfahren scheiden wegen `position: sticky` aus.
Ich war schon drauf und dran, ein leeres `div` vor den `header` zu setzen …
Moment! Da ist ja schon ein Element ganz am Anfang der Seite: `head`!!! *(Drei Ausrufezeichen. Nein, ich bin nicht verrückt.)* Um den im Auge zu haben muss man ihn nur sichtbar machen:
```css
head { display: block }
head > * { display: none }
```
und dann kann man ihn auch observieren: 👀
```js
const intersectionObserver = new IntersectionObserver(
entries => {
document.body.classList.toggle('scrolled', entries[0].intersectionRatio == 0);
},
{ rootMargin: '36px' }
);
intersectionObserver.observe(document.head);
```
---
Und wo ich gerade an Observern dran war, hab ich die Überwachung der Höhe des Headers auch auf [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) umgestellt. Ich nehme stark an, dass die Browser das mindesten ebenso performant – vermutlich sogar besser – implmentiert haben als wenn man selbst Debouncing oder Throttling implementieren würde.
Vorher:
```js
const debouncingDelay = 250;
const headerElement = document.querySelector('header');
let timeout;
const refreshHeaderHeight = () => {
document.documentElement.style.setProperty(
'--header-height', `${headerElement.offsetHeight}px`
);
console.log(`${headerElement.offsetHeight}px`);
};
window.addEventListener('resize', () => {
clearTimeout(timeout);
timeout = setTimeout(refreshHeaderHeight, debouncingDelay);
});
refreshHeaderHeight();
```
Nachher:
```js
const resizeObserver = new ResizeObserver(entries => {
document.documentElement.style.setProperty(
'--header-height', `${entries[0].target.offsetHeight}px`
);
});
resizeObserver.observe(document.querySelector('header'));
```
*Amazing discovery*.{:@en} Zu sehen bspw. bei [Discovery](https://bittersmann.de/startrek/series/dsc) *(pun intended)*{:@en}.
🖖 Живи довго і процвітай
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix