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

user_283529 0
Viewed 338

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

Blurry scrollbar

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 :)

css-transforms google-chrome css
2 Answers

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?

user_20159090

A little change in your code seems to solve the issue.

Change scale by a perspective + translateZ. this scales down the element (as it is now "far away"), and seems to not have the bug:

setInterval(() => {
  const className = document.getElementsByTagName('main')[0].className
document.getElementsByTagName('main')[0].className = className ? '' : "shazam"
}, 2000)
main {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  margin: auto;
  overflow: auto;
  transform: perspective(100px) translateZ(-1000px);
  transition: transform 1500ms;
  transform-origin: top left;
}

.shazam {
  transform: perspective(100px) translateZ(0px);
}
  <h1>List of interesting things I've done during lockdown</h1>
<main>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>… Who cares about lists anyway?</li>
  </ul>
</main>

user_19263690
Related