Div scrollbar visual distortion when parent is scaled

I’m creating a web app with React and React Flow. React Flow supports zooming using the mouse scrollwheel, by applying a scale() style property on the content div that encompasses the work area.

I’m running into a problem where a child div‘s scrollbar becomes visually distorted whenever I zoom in. It shows endless copies of itself and the contents of the div like windows in older versions of Windows would create trails behind them if you moved them while the computer was busy. The div is a child of a React flow node. Some things I’ve noticed:

• It only happens in Chromium-based browsers (Chrome, Edge) but not in Firefox
• If I remove the background color from the div the issue disappears
• If I zoom out past a certain point (scale(1)), the issue disappears
• The scrollbar is functional and you can click, drag etc. The scrollwheel also works.

I’ve tried multiple solutions, including:

• will-change:transform
• transform: translateZ(0)
• transform: none
• backface-visibility: hidden/visible
• image-rendering: pixelated
• perspective: none
• contain: layout paint
• mix-blend-mode: normal;
• z-index: [various values]
• filter: blur(0)

None of them made any difference except filter: blur(0) which removed the dragging distortion, but made the entire div very blurry instead.

What can cause this, and how do I fix it?

You need to sign in to view this answers