[Grid - Selection] Selection in combination with horizontal scroll and sticky columns drawing issue

[jnolles]

Provide a general summary of the issue here

Given a sl-grid with sticky columns, and horizontal scrolling. The non-sticky columns are visible underneath the sticky columns.

This is due to cells having a background with opacity of 0.1

🤔 Expected Behavior?

Cells should not be visible under each other.

😯 Current Behavior

See summary

💁 Possible Solution

Workaround:

Fix issues with headers of sticky columns:

      sl-grid::part(selection),
      sl-grid::part(username) {
        z-index: 2;
      }

Fix issues with see-through cells:

      sl-grid {
        --sl-color-background-selected-subtlest: #e6f0f9;
      }

🖥️ Steps to Reproduce

Create a sl-grid with:

• 2 sticky columns (one selection and one normal)
• 'Selects: multiple' datasource
• Enable grid scrolling

What browsers are you seeing the problem on? (only for bugs in code)

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

👤 Your name

Jorn Nolles

🧢 Your product/team

Magister

🎨 Your Theme(s)

Magister

[jpzwarte]

@jnolles I'm unable to reproduce this here: https://storybook.sanomalearning.design/?path=/story/grid-scrolling--both-sticky&globals=theme:magister

Can i analyse this problem somewhere live?

[jnolles]

Hi Jeroen, you need a grid with 'Selects: multiple' datasource to reproduce it.

[jpzwarte]

As soon as i add a <sl-grid-selection-column sticky></sl-grid-selection-column> to https://storybook.sanomalearning.design/?path=/story/grid-scrolling--both-sticky, you can notice some weird visual glitch happening when scrolling.

CleanShot.2025-09-25.at.13.27.41.mp4