Strange Rendering-Bug im Firefox
bearbeitet von Rolf BHallo Gunnar,
ich hab was. Es ist genauso hässlich, aber es gibt keinen Strich. Lass die Lineargradienten an html und body weg und hexe es mit Pseudoelementen und einer Border:
~~~css
body::before,
body::after {
content: " ";
display: block;
top: 0;
left: 0;
width: 100%;
}
body::before {
position: fixed;
border-bottom: 1px solid silver;
height: calc(1px + var(--header-height));
z-index: 1;
}
body::after {
position: absolute;
background: var(--background-color);
height: calc(var(--header-height) + var(--table-margin));
z-index: 2;
}
header {
z-index: 3;
}
~~~
In der z-Achse liegt das ::before unten und enthält den Strich als bottom-border. Es ist 1px (oder die Breite der Linie) höher als der header, d.h. es guckt unter dem Header weg.
Es folgt das ::after in der gewünschten Maskierungshöhe.
Obendrauf liegt das header Element. Da position:fixed und position:sticky beide einen neuen Stacking-Kontext erzeugen, müssen Strich und Maske separat an den body geklebt werden, damit sich der Stackingkontext des header dazwischen schieben kann.
Gefallen tut es mir nicht, aber offenbar wird der linear-gradient nur in der Breite von 1K Pixel gerendert, solange dort nichts anderes ist. Möglicherweise kann man auch mit einem 1px hohen Image und passender Positionierung eines repeat-x background etwas hexen. Immerhin muss man kein Markup dafür einfügen, und man braucht auch keinen Observer.
_Rolf_
--
sumpsi - posui - obstruxi