The jsfiddle cursor's apparent position is not it's actual position in Chrome and IE. Works in Firefox

Question

Noticing today that on long lines of code or comments, the cursor progressively gets more and more incorrectly positioned until its apparent position can be off by more than 3 characters. (This looks like the editor thinks it is working with a different font.)

I see this in Chrome and IE. However Firefox is working fine. Is anyone else seeing this?

Bullish

I can confirm this behavior. Using the latest version of chrome (currently 39.0.2171.65) – Baskin

yep, same for me... I'm just using a lot more Plunker now. – Yare

Answer 1

Hope they fix it. Turn off text-rendering: optimizeLegibility; in the body element and you should be good for the meantime.

In Chrome you do it this way:

• Open the fiddle you want to edit
• Open the chrome-console (f12)
• select "elements" tab
• select the "body" tag
• scroll the "styles" area (on the right side) down to the "normalize.css"
• finally uncheck the checkbox next to "text-rendering: optimizeLegibility;"

Now the cursor is fixed until you reload the page.

Mendacious

If you are using Styish, then you can use this style: userstyles.org/styles/107637/jsfiddle-caret-fix-for-chrome – Deadening

Answer 2

Thanks to user1803096 for the quick fix. Now because it is boring to each time use the inspector to remove this specific CSS rule, i prefer to copy/paste and execute in console following javascript:

var css = '*, body, button, input, textarea, select {text-rendering: initial;}',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

Hope this will be fixed soon.

Nutpick

Fantastic thanks, this has been killing me for a few weeks - tampermonkey script is up and running! – Heterogenesis