CODEWITHSUNDEEP
htmlcss
jcubic
jcubic

Reputation: 66570

mix-blend-mode with table cell that have position sticky

I have very weird behavior that happens in both Google Chrome and Firefox.

I have a table with a gradient background that creates zebra stripes. The cells have a white background and I use mix blend mode to hide the cells that are sticky so only one sticky cell that is visible.

The problem is that when the table cell is sticky, blend mode doesn't work properly and you see multiple cells at once. But if I put div inside the cell and make the div sticky it magically works. Any idea why?

The difference between the table is this:

.table-A .level-2 [rowspan] div,
.table-B .level-0 div,
.table-B td[rowspan] {
    position: sticky;
    top: 0;
}

And both tables have:

.level-2 [rowspan] {
    background: white;
    mix-blend-mode: multiply;
    vertical-align: top;
}

You can see the issue in this CodePen demo

and in this screen:

enter image description here

My question is why this is happening why cells work differently than div inside. As you can see from the demo I already know how to solve the issue I only want to know why it's behaving like this.

Upvotes: 2

Views: 272

Answers (1)

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

Refer to the docs:

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

So your problem is not caused by td or div itself. It's because of their containing block:

If the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).

For sticky with the div inside td, it's clear that the containing block is its parent td(because td establishes a formatting context) so each div have its own containing block and will not be stacked.

For sticky with td, I haven't found any official document about containing block of td, only found this, so I'm not sure it's a tbody, table or the div that wrap the table. The only thing can be sure is all the td sharing the same containing block, that's why it's stacked.

Upvotes: 1

Related Questions