How to prevent blurry scrollbar on Windows Chrome after transform scale?

Question

I'm facing a weird issue while trying to scale an HTML element. As demonstrated in this codepen, I want the element to appear scaled down (transform: scale(0.1)), then animate itself and scale up to its full size (transform: scale(1)). The element is a big list limited in height using overflow: auto;, which means a scrollbar is displayed.

My issue is that the scrollbar arrows are not scaled up correctly compared to the rest of the elements, which makes them extremely blurry and unrecognizable to the user. This only seems to happen on Windows (10) when using Chrome. cf screenshot below

I haven't been able to find any one on the Web talking about this issue, and it seems a bit confounding to me as it doesn't seem to be an edge case, and it is pretty simple to reproduce.

Thanks in advance for any advice :)

Answer 1

Turning my comment into a proper answer:

Slowing down the animation, you can see that the graphics engine of W10 Chrome and Edge (use the same code base since Edge March 2020) simply skip certain scrollbar 'paints' during the animation and only show the thumb whilst scaling...

W10 Firefox does the scaling as expected, however.

This is browser internal code, so I predict a lot of work ahead to circumvent the problem as you need to dive into browser developement and check per browser (HTML/CSS) how to avoid the behaviour.

Would that be worth your time and effort?