Caret and text selection misaligned


I am new to Code Mirror and really find it very well thought, designed and documented. Currently, I use CodeMirror 5.6.

I am integrating it in a Chromium browser dialog running with Sketchup, with the mode Ruby. This is just a small text editor to visualize scriptlets in Ruby.

I have no problem on Windows, where everything works fine. With the same code, I have problem when it runs on Mac (also Chromium embedded in Sketchup). The font is Menlo (monospaced) but the issue is the same regardless of the font family and font size. The editor is created with fromTextArea.

  1. There are 2 carets: one vertical and big, and a small one horizontal on the next character
  2. The vertical caret is not aligned with the characters
  3. The selection by dragging the mouse is also misaligned
  4. The double-click does not select word (there is only a brief highlight).

Again, The code (HTML, CSS, Javascript) is the same between Windows and Mac.

Here is a video showing the issues.

Is there something I do wrong?


Does calling .refresh() on the editor (after everything has stabilized, for example when clicking) help with the issue?

CodeMirror measures its text size on init. If something (like CSS or fonts loading, or dynamic CSS changes) modifies the size of its content after that, it’ll use the outdated measurements. Calling refresh when everything is laid out in its final form should help with that.

Thanks for helping on that annoying issue.

I do a refresh() after creating the editor. I added a refresh() after typing a character, but it does not change anything.

I noticed that, if I disabled the display of line numbers (option lineNumbers:), the vertical caret is now correctly positioned horizontally (i.e. just before characters). However:

  • the vertical cursor is not correctly positioned vertically. Same for the selection.
  • the small caret still display next to the vertical caret



It looks like the coordinates are offset by a small delta versus the display text, both for the mouse position and the caret positioning.

Is one of the editor’s parent elements transformed with CSS, by any chance?

No. I don’t use transformation.

Also I use the same code, HTML, CSS and Javascript on Windows (where it works) and Mac.

On Windows, this is what I get. Everything is correct.


What bothers me is

  • the extra margin on the top of the editor
  • the second caret (I did not find what it is in codemirror.js)
  • the lack of left margin in the line number gutter.


Problem SOLVED.

There was a conflicting setting in my CSS part: on Mac I had set all margins and padding to 0px at Body level.

Many thanks for your support


Glad you found the cause. CSS is a monster to debug.

Many thanks to you. CodeMirror is really powerful…