Multiple sticky elements disappear in Firefox

user_6418193 0
Viewed 240

In Firefox 89.0 multiple sticky elements disappears without a reason.

Here is an example (usage of position: sticky):

<table>
<tr style="position: sticky; top: 0px; height: 30px;"></tr>
<tr style="position: sticky; top: 30px; height: 30px;"></tr>
<tr style="position: sticky; top: 60px; height: 30px;"></tr>
<tr style="position: sticky; top: 90px; height: 30px;"></tr>
...
</table>
https://jsfiddle.net/mcdhnzgy/11/

Just scroll down and hover wild over sticky elements.

Are there some CSS styles or JavaScript missing, or is this just a weird browser bug? In Chrome everything seems fine.

Additional note: Solution should work with table markup and should work with multiple columns.

sticky firefox css
1 Answers

Looks like this is an issue with the table in firefox. I face this issue when i scroll down and hover on the sticky element and then move my mouse out of the result box. You can fix this issue by adding this style: enter image description here

table {
    display: flex;
    flex-direction: column;
    width: 100px;
}

https://jsfiddle.net/arminya/t7avu5w1/1/

user_93549340
Related