Beta dot animation breaking fonts subpixel antialiasing on Windows in Chrome

[Palid]

It seems that the animation mx_Beta_bluePulse used in class mx_BetaDot is making an enormous layout trashing and is a second source of fonts not being correctly subpixel antialiased on Windows. The main source so far is the background-blur on left panel, which is being taken care of here: matrix-org/matrix-react-sdk#6262

To reproduce proper behavior comment out class .mx_BetaDot in res/css/views/beta/_BetaCard.scss and remove all backdrop-filter references from our css codebase.
The other way to verify if rendering is proper is to look for layer borders checkbox which is accessible via Chrome Devtools cog menu (Rendering). Screenshots below:

Valid fonts rendering (properly antialiased) will have this kind of layer borders:

Invalid fonts rendering layer borders (it's super easy to just look at the bottom-right corner with icons):

The fonts rendering is irreproducible on anywhere except Windows and Chrome/Chromium, yet the layers part should be easily reproducible on any system using Chrome.

Related: matrix-org/matrix-react-sdk#6262 (gets rid of background-blur and replaces it with canvas, which doesn't trash the layout)
Related: element-hq/element-desktop#682

[Palid]

Revisit in a week, this is either already solved, or will be automatically closed after we release the version without beta dot.

[Palid]

Seems to be sorted out by the DOM rework.