How to solve text blur issue in Chrome (overflow: hidden on div after transform)?

Question

css

The problem appears in Chrome as text blur after overflow: hidden on a div after a transform.
"Medicines" from stackoverflow like "-webkit-font-smoothing", "transform: scale(1.1) translate3d(0,0,0)", "backface-visibility: hidden" do not heal.
Problem Example (Chrome only)

Answer 1

Specifically, in this example, to make a slanted background, it is better to make it a separate block that does not contain text (for example, put it in a block with text, position: absolute and stretch it as needed). It is necessary to strive so that the text is not in transformable blocks.
If this option suits you, I can show an example of its implementation by modifying your example.