Weird Chrome Paint Bug on Retina screens

A web app I work on kept breaking in a funny way on the version 69.0.3497.92 of Chrome.

In a scrollable modal, when viewing on a retina display, the elements on the hidden part of the modal that was outside the viewport would not be rendered when you scroll them into view till you click or interact with that part of the page.

This was weird because I’d never seen anything like it before. That it only happened on retina displays made it even weirder. It worked well before the update, so there had to be something up with that version, yea?

In 3 days, further updates had been released, so at the time of writing this, there was version 69.0.3497.100.

Yay, finally … they’ve realised the error of their ways and the issue would be fixed, right? Nope!

I’d go through chrome issue after chrome issue and even drop my comment on a two year old issue thread, effectively reviving it, before I eventually stumble on this comment in a 3 year old issue thread that suggests a fix and indicates that this isn’t new at all.

All I had to do was add will-change: transform as a CSS property to the scrollable element, the parent div of the modal.

Why this didn’t occur in previous versions, I can only take a guess. Right now, it’s that the issue was fixed by a hack that Chrome can no longer bear to have if its paint/rendering operations are to be optimal.

Whatever it is, I’m just glad the app I work on is stable on Chrome and is screen-agnostic once again.