Misaligned caret in editors

[lolmaus]

The longer the line, the more caret is misaligned.

I open SassMeister and start typing a long line. At first, the caret appears to the right of the last symbol:

But with every character, the caret is positioned a little bit to the left. At first it overlaps the last character:

Then it appears to the left of the last character (though new characters appear to the right of the last character):

Here i place the caret to the left of "X" and press "1". But the result is "X1" instead of "1X".

Tested in latest stable Chrome under Kubuntu and MacOS.

[jedfoster]

I have been unable to reproduce this problem. I've tested in Chrome 32, Chrome 34 dev, Chrome Canary, and Firefox, with lines as long as 200,000 characters. I've resized the window and the editor pane, and I've zoomed in and out. I just can't repro this issue. Ace behaves rather beautifully, given the absurd strings I used.

I'll leave this open for a while longer in case others run into this problem.

[lolmaus]

I'm still suffering from this every day.

I suspect that the issue is specific to fonts installed in the OS, so it appears not on all computers.

I can share my screen with you via TeamViewer for you to recognize the problem.

[lolmaus]

Hey @jedfoster, this issue still persists. It forces my to edit code in a notepad and copy it to SassMesiter.

lease reopen the unresolved issue.

[jedfoster]

I have not been able to replicate this issue, and no one else has reported experiencing it, either.

[lolmaus]

I have just managed to resolve the issue with this CSS rule in developer tools:

* { font-family: courier !important; }

This proves my supposition.

Also, have a look at this test:

When i zoom this test in and out, the relative lengths of two lines vary. At different zoom levels, the first line appears longer, almost equal to or shorter than the second line.

So the problem is that the font is not displayed as monospaced.

I was unable to reproduce the problem on another site using the same font Source Code Pro.

I've tried switching to a different font from the Google Fonts collection: Ubuntu Mono, available locally on my system. When i applied * { font-family: 'Ubuntu Mono' !important; }, the issue was immediately gone.

I don't know what is the factor that causes the issue to appear/disappear. Could you please investigate a little further? Try another font? I will gladly assist you.