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?

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.

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.