Text can be blurry after scrolling

[lid]

Type of issue (choose one):

• Bug
• Feature request
• Question

Description

After scrolling in either Ace Kitchen Sink or Caret (a downstream project), the text sometimes appears to be more blurry, depending on where the scroll is stopped. Other code editors (e.g. CodePad) and webviews do not exhibit this behavior. Could this be the result of an undesirable antialiasing behavior?

Before scrolling:

After scrolling:

Additional notes

Originally filed downstream: https://github.com/thomaswilburn/Caret/issues/729
Potentially related issues: #3081, nos/client#376

System details

ChromeOS | 84.0.4147.64 (Official Build) beta (64-bit)

[nightwing]

On windows similar issue was happening with because of css transform.

Could you try running require("ace/lib/dom").HI_DPI to see if ace is using css transforms or absolute positioning in this case.

[lid]

> require("ace/lib/dom").HI_DPI
< true

[nightwing]

Does it look better on http://raw.githack.com/ajaxorg/ace/fix-blurred-text-on-chromeos/kitchen-sink.html ?

[lid]

Thanks for the quick attempt at a fix! However, the githack seems to be about the same, TBH.

Clear before scroll:

Blurry after scroll:

[nightwing]

could you also run require("ace/lib/dom").HI_DPI again to see if the change have actually switched it to false?

[lid]

I'm afraid it didn't change on githack, I get the same console result:

> require("ace/lib/dom").HI_DPI
< true

[nightwing]

Thanks, could you try if http://raw.githack.com/ajaxorg/ace/4e96653032f248a87d879d7d28cddd5e196d6ecf/kitchen-sink.html fixes the issue
and if it doesn't what is the output of window.devicePixelRatio and require("ace/lib/useragent").isChromeOS

[lid]

It's fixed with that latest githack! Thank you!