How to fix text rendering in chrome?

Question

css

During the layout of the next project, I encountered a problem with displaying text in the Chrome browser. In other browsers, even microsoft everything is fine. This issue does not depend on the selected font or how it is connected.

Roughly speaking, only the position of the parent block changes, and the text somehow miraculously changes the thickness, which should not be. The question is what kind of bug is this and how to fix it.

Answer 1

transform: translate3d(0,0,0);
If you add this property to the .child child element, then everything will work fine, at least the text thickness will not change when changing position. Although I still do not understand why this happens in chrome, but I consider such a crutch the best solution so far.

Answer 2

Reset all default styles and/or force the .parent h1style.