Sticky caption im Firefox

[Random2356]

Hallo!

Der Firefox-Browser hat einen bekannten Bug, der sich dahingehend äußert, dass das <caption>-Element, wenn es mittels position: sticky positioniert ist, beim Scrollen nach einer Weile irgendwo hängen bleibt.

Hier mal ein minimalistisches Beispiel, bei dem das nachvollzogen werden kann - einfach mit dem Firefox ein bisschen im Dokument ganz runter- und wieder hochscrollen.

Gibt es irgendeinen naheliegenden Workaround, um das sticky-Verhalten an dieser Stelle anderweitig nachzubilden, auf den ich gerade nicht komme? Das Element <thead> kommt leider nicht infrage, das wird schon anderweitig eingesetzt.

[Gunnar Bittersmann]

@@Random2356

Der Firefox-Browser hat einen bekannten Bug, der sich dahingehend äußert, dass das <caption>-Element, wenn es mittels position: sticky positioniert ist, beim Scrollen nach einer Weile irgendwo hängen bleibt.

Fun fact: Ich bin gerade gestern über denselben Bug gestolpert, als ich caption { position: sticky } in meinen Star-Trek-Episodenlisten einbauen wollte.

☞ Codepen

Da kann ich mir ja das Schreiben eines Bug-Tickets sparen …

“Opened 4 years ago Updated 3 years ago” – das sieht nicht gut aus.

Gibt es irgendeinen naheliegenden Workaround, um das sticky-Verhalten an dieser Stelle anderweitig nachzubilden, auf den ich gerade nicht komme?

In meinem Fall könnte ich h1 verwenden – dann hätte auch Axe nichts mehr einen Punkt weniger zu meckern. (Hatte mich letztens mit Hidde de Vries drüber unterhalten. Er meinte, es sei OK, keine h1 auf der Seite zu haben, wenn die Tabelle der einzige Inhalt ist.)

Vielleicht kannst du eine Zwischenüberschrift verwenden?

😷 LLAP