HTML/CSS - does css filter create many rendering layers that slow down web page rendering?

I have a data grid built with SlickGrid. I have used css brightness filter to make odd rows darker than even rows, and css background blend to give select rows a blue-ish color while still maintaining the odd/even row color alternation.

.slick-row.odd {
  filter: brightness(.96);
}

.slick-row.selected {
  background-image: linear-gradient(0deg, #DFE8F6, #DFE8F6);
  background-blend-mode: multiply;
}

To just give some idea, the grid looks like this:

What I realized recently is that the grid starts to flicker when it scrolls vertically. Generally the new rows come out a bit slow than before, and even rows come out faster than odd rows. It gives you a feeling during fast scroll that all your odd rows (supposed to be darker) are empty, while even rows have data.

I have checked the chrome dev-tools following a few tutorials I can find to trouble shoot the rendering performance. What I do notice that the brightness filter creates lots of layer borders. I think it is making each row a separate layer.

Turning the style off does make the rendering faster, my question is whether it is slow because of the css filter and the layers, or just because I have many styles to apply?