DataTable: Using "Striped Rows" with "Frozen Columns" causes overlapping text

[lenaschimmel]

Describe the bug

When a DataTable has stripedRows and scrollable, and some of the columns have frozen, scrolling horizontally results in a visual glitch: the text of the grey rows overlaps, while the text in the white rows is properly clipped. Example screenshot:

I initially noticed this with PrimeVue version 3.33.0, but in the Reproducer it also happens with version 3.50.0. If affects all my browsers (Firefox 124.0, Chromium 102.0.4984.0, Safari Version 17.2 (19617.1.17.11.9), all on MacOS).

It seems to be caused by transparent background colors used in some themes, like in bootstrap4-light-blue/theme.css:

  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
    background: rgba(0, 0, 0, 0.05);
  }

This seems to be the case in about 60% of the themes. The other 40% use non-transparent colors for striped rows, and the bug does not occur.

Reproducer

https://stackblitz.com/edit/bys5hf?file=src%2FApp.vue

PrimeVue version

3.50.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. open the Reproducer
2. scroll the table to the right
3. see the overlapping text

Expected behavior

The text of the grey rows should be clipped / hidden behind the background of the frozen column, just like it is in the white rows.

[lenaschimmel]

I just realized that something very similar happens with components inside cells. But unlike text, which is only overlapping in every second row, a <Button> will actually overlap in every row. It's hard to explain, so please see this short clip, or try the updated Reproducer.

https://github.com/primefaces/primevue/assets/1325019/274d53c0-f2db-4b21-a277-274bba229142

[flier268]

Any solution? So do I on PrimeNG

[flier268]

.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even){
  background-color: #FAFAFA; /* 等同於 rgba(0, 0, 0, 0.02) 疊加在白色背景上 */
}