Strange Rendering-Bug im Firefox

[Rolf B]

Hallo 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:

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. Beim Scrollen bleiben Strich und Header da, und die Maske schiebt sich weg. Wäre der Strich Teil des Body, könnte man auf ein Pseudoelement verzichten.

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