text in body element immediately goes blurry on scroll
text goes blurry on Lenovo G32qc-10 Monitor but not 13-inch MacBook Air (2022 M2)
<html>
<head>
<style>
body {
background-color: black;
-webkit-font-smoothing: antialiased;
}
span {
color: white;
}
</style>
</head>
<body>
<span>Text Goes Transparent</span>
<span>Text Goes Transparent</span>
<span>Text Goes Transparent</span>
<!-- ... -->
</body>
</html>
I tried changing -webkit-font-smoothing CSS property to no avail. I tried changing background-color CSS property to ‘white’ and that does work
When the background-color property is set to white the text remains visible
I expect my green text to remain visible on scroll and not become blurry
On further inspection, it is clear that some text is malformed while scrolling on dark background on Lenovo G32qc-10
In other cases like the chatGPT website, text is not blurred on scroll even in dark mode