Fix double caret blink in Sonoma

[cyanzhong]

This issue only reproduces in macOS Sonoma (reproducible with https://codemirror.net/try/ too). Please check out the video.

double.blink.mov

It seems by setting caretColor to cm-line doesn't hide the native caret, I fixed it in my project by adding:

.cm-content {
  caret-color: transparent !important;
}

// or through the theming system

Feel free to close and make your fix as I don't know what's the best practice. I am just sharing an example. Thanks.

[cyanzhong]

@marijnh fyi.

[marijnh]

Which Safari version is that? I don't have Sonoma. Safari 17.1 doesn't seem to have this issue.

[cyanzhong]

I am also using 17.1:

You need to look into it closely, the native caret is bolder than the one we have in CodeMirror:

Screen.Recording.2023-11-09.at.8.42.01.AM.mov

[marijnh]

Even with a colored, almost transparent CodeMirror cursor, I am not seeing the native cursor when drawSelection is enabled.

[cyanzhong]

I am not sure, probably this is a Sonoma issue instead of just WebKit. In macOS Sonoma, Apple introduced quite a few changes to text input, such as:

Inline predictions

Input source indicator

Screen.Recording.2023-11-10.at.1.15.05.AM.mov

Caret breathing effect

Looking into my video, you'll see fade in/out effects of the native caret.

I believe some of them are not tied to WebKit, more likely a system-wide change.

Again, I am not sure, just sharing what I observed. What I can confirm is that the above features are added to all input controls, including WebKit, TextKit, and so on.

Thanks.

[marijnh]

Okay. Really odd that CSS rule matching, which is very much a browser-internal thing, would work differently for the same browser version on different OS versions. But I guess your fix is mostly harmless. Just to make absolutely sure we're not working from confused assumptions here, could you look at this page and confirm that you are getting a visible cursor when you focus the top editable element, but not in the bottom one?

[cyanzhong]

I am seeing the opposite (which I think is expected?):

Also, I tried this (added a background-color):

<style>
  .cm-content, .cm-line, .cm-line2 { caret-color: transparent; background-color: red; }
</style>

<div class=cm-content contenteditable=true><div class=cm-line>This should have a visible cursor (on Sonoma)</div></div>

<div class=cm-content2 contenteditable=true><div class=cm-line2>This should not</div></div>

I am getting:

The background-color matches both, but the caret-color only matches the first, I cannot explain.

Maybe it's time to report a WebKit bug.

[cyanzhong]

I think a proper fix would be just moving the caret hiding logic from cm-line to cm-content (the root element of contenteditable):

It works for Sonoma and other clients, and seems not a weird code, hiding both seems safer though.

[cyanzhong]

We also have a default theme like this:

I am assuming this is for those don't use drawSelection and the change is not a problem (probably we should have hidden caret in cm-content in the first place?).

[marijnh]

I am seeing the opposite (which I think is expected?):

Um, yeah, I flipped the styles around, you're right.

Attached patch changes this in a slightly more minimal way. We'll also want to keep a style for .cm-line in case a theme overrides it. And yes, caret-color in themes only takes effect when you don't use drawSelection—otherwise .cm-cursor is what is showing the cursor.

[marijnh]

Followed up with cf5e5a9 because my initial patch was completely broken.

[cyanzhong]

Thank you!