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

lenaschimmel commented 7 months ago

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:

Overlapping text

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

open the Reproducer
scroll the table to the right
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 commented 7 months ago

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 commented 1 month ago

Any solution? So do I on PrimeNG

flier268 commented 1 month ago

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

FatimaMedusa commented 1 month ago

any solutions? I also have this issue

primefaces / primevue