CSS text-rendering Issue in chrome

Question

there is a content in h3 tag, but it not appearing in chrome browser

see the print screen

=========

If i hide text-rendering:optimizelegibility It will appear see the print screen

What are the role of "text-rendering:optimizelegibility" css property ? and why this content not appearing ?

Answer 1

optimizeLegibility: The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

from https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering I suggest overwrite css with: text-rendering: auto