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