CSS animations cause font flickering in editor

[ussuri]

When the mouse cursor enters or leaves the bar with line numbers, the fonts in the editor and the outline flicker. This is caused by the code folding triangles being transitioned in and out of view in that bar (opacity is transitioned), which temporarily disables the font subpixel rendering in Chrome (the problem that we're now very familiar with). I'll try turning the transition off.

[dinhvh]

Same happen with the transition for filter bar.

[dinhvh]

Moving out from 0.13.

[ussuri]

Why?

[dinhvh]

There's a lot of issues for 0.13. We need to triage them.

Hoa V. Dinh

On Thursday, June 12, 2014 at 12:27 PM, Sergey Shevchenko wrote:

Why?

— Reply to this email directly or view it on GitHub (https://github.com/dart-lang/spark/issues/2475#issuecomment-45936936).

[ussuri]

I understand that there is a lot of issues, but this one is pretty jarring, and there are several easy solutions, with Devon and I both exploring them.

[cleercode]

Also happens for me when opening a menu btw.

[ussuri]

This is not fixed fundamentally, just masked in some more frequent cases. I'll reopen and rename to reflect the current status, so we don't lose track.

[ussuri]

...also happens when a disclosure triangle is clicked next to an expandable item in the file tree view.

[ussuri]

To document progress: this is much, much less pronounced in Chrome 39 now. Almost to the point where you have to know to carefully look for it to notice it.

[processnotproduct]

I am actually seeing this after every edit that is left for a moment to "build". In the bottom-left corner I see the word "Building..." pop up for a moment, at the same time the editor section text flashes as described above.

Running CWS version on Dell Chromebook; Google Chrome - 38.0.2125.101 (Official Build b85e622) beta Platform - 6158.49.0 (Official Build) beta-channel wolf Blink - 537.36 (@(EDITED TO DISABLE LINK)3bb5626) JavaScript - V8 3.28.71.15 Flash - 15.0.0.189-r1 User Agent - Mozilla/5.0 (X11; CrOS x86_64 6158.49.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.101 Safari/537.36

[ussuri]

That might have been still an issue with Chrome 38 beta. I'm assuming you've manually switched the Chrome version and channel on your Chromebook -- could you try Chrome 39 or 40 dev?

[ussuri]

Actually, you're right: the issue is still there. I mistakenly draw my conclusion from looking at a MacBook screen: I forgot that this problem has always been almost unnoticeable on Retina displays, unlike regular ones. Moving back to the Later milestone.

[ussuri]

Addition: I'm pretty confident that the problem has amplified in the last week or two. The flickering is now just outrageously noticeable, e.g. when opening the main menu. This is on a 30-inch monitor connected to a MacBook Pro. I think I'd notice it a long time ago if it were always there.

We need to take a closer look.

[ussuri]

This article contains some information: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/. In the very least, we can contact the authors for expertise on this.

[ussuri]

...And we're back to barely noticeable level of flickering with Chrome 40.0.2194.2 dev. So I think the last incident was just a regression that's quickly got fixed.

[ussuri]

I no longer understand what's happening, but the flickering is back.

It seems like, on top of the problem itself, at least on OSX the subpixel font rendering sometimes gets stuck at the "off" state. I suspect that happens when the system resumes from sleep. Then it might appear as if the problem had become fixed, but restarting CDE brings it back.

[ussuri]

Once again this problem seems to have been fixed in Chrome... I've tried both the latest Chrome (41.0.2224.3 dev (64-bit)) and Dartium (38.0.2125.0), and couldn't reproduce no matter what I did. Closing for now.