Use opacity instead of visibility for cursor blink animation

[hubgit]

Clicking inside the editor on https://codemirror.net/ causes the cursor blink animation to start, which uses ~2% CPU and ~60/120 style recalculations per second (according to the Performance Monitor tab in Chrome's Dev Tools, in macOS).

Changing the animation from visibility: hidden to opacity: 0 reduces both of these measurements to approximately zero.

Caveat: I'm not sure whether this has any important effects on accessibility.

[marijnh]

How are you measuring this? It seems odd that browsers would do so badly at optimizing visibility animation while not having the same issue with opacity.

[hubgit]

I'm measuring by looking at the Performance Monitor tab in Chrome's Dev Tools while having the cursor focused in the editor.

visibility:hidden:

opacity:0:

[marijnh]

I don't think this impacts accessibility. I'm generally wary of patches addressing specific issues in browsers like this, since those change all the time, but this seems harmless enough, and Firefox seems unimpacted, so I guess we can make this change.

[marijnh]

Merged as e149f4b

[timdown]

I would assume that the difference is that visibility has the potential to affect layout while opacity doesn't.

[marijnh]

How, though? Unlike display: none, visiblity: hidden elements take up room as normal, just aren't drawn.

[timdown]

Yeah, true, although not for all values of visibility, e.g collapse. I don't know. Probably not a helpful contribution of mine, sorry.