Flashing content when scrollbars added to container

[mvalery123]

Describe the bug When the content of my component becomes scrollable, it flashes the content.

To Reproduce Steps to reproduce the behavior:

Resize a component to trigger scrollbars.

Expected behavior The content does not flash.

Examples If you still need a repo let me know and I'll try to make one with the same problem. Basically I have some animation code on that big white box in the chat window:

  animation: "fadeIn 3s ease-out",
  "@keyframes fadeIn": {
    from: {
      opacity: 0,
    },
    to: {
      opacity: 1,
    },
  },

If I remove this from the big white box, it won't re-animate every time with overlay scrollbars. However I'd like to keep the animation if possible without the flash.

Environment

• Used Operating System(s): macOS Sonoma 14.3
• Used Browser(s) (with version): Google Chrome | 126.0.6478.127 (Official Build) (arm64) Revision | a435861f0ca363a64f7485619ee5939833823fce-refs/branch-heads/6478@{#1592} OS | macOS Version 14.3 (Build 23D56)

[KingSora]

Good day @mvalery123 :)

I'm struggeling with reproducing the described behavior.. This would be my attempt: https://stackblitz.com/edit/overlayscrollbars-jdprqq?file=styles.css,src%2Factions.ts I'm not sure if I'm missing something here

[KingSora]

@mvalery123 any feedback from your side? :)

[mvalery123]

Hey @KingSora ! Thanks so much for the example. I will get back to you with an update! Currently trying to figure out how to detect mobile touch scroll / touch events in overlayscrollbars events