Linear gradients slow down (large) table rendering by a lot

Created by: stgm

This concerns the table styles in BS5 alpha 3. Apparently due to the recently introduced use of linear-gradient the rendering of my (rather large) tables becomes very slow. My tests have been done on a Macbook Pro i5 with Intel Iris Graphics 6100.

When including a very large table in a document, after scrolling down, the rendering of the next part of the document takes as much as a second. The screen is actually white while waiting for the renderer to "catch up". This does not happen when the linear-gradient backgrounds are disabled. However, in Bootstrap 5, disabling those will also remove visible striping, for example.

--> Demonstration

Below is a Codepen with a large table that clearly shows this problem in Safari 14.0.1 (16610.2.11.51.8) and Chrome 87.0.4280.67 on Mac Intel. In Firefox 83.0, the problem is less noticeable but still apparent.

https://codepen.io/stgm/pen/poEoryZ

You can uncomment the style in this Codepen to override the use of the linear-gradient and appreciate the difference. It may be easier to see the problem if you enable the "Full Page View", because you can then scroll faster and see how this seems to make the problem even worse.

--> Relevant links

Origin of the linear-gradient idea: https://github.com/twbs/bootstrap/issues/29244 First jab at integrating these: https://github.com/twbs/bootstrap/pull/30342 Final PR containing the linear gradients for tables: https://github.com/twbs/bootstrap/pull/30466