title: The characters are not getting typed where the cursor is
body: <p>In my Ace editor, just after the scroll bars appear, the character are getting typed but not where the cursor is. See the picture below. What has gone wrong? The code seem to work OK in my dev environment.</p>
  <p><a href="https://i.stack.imgur.com/x5rCd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x5rCd.png" alt="enter image description here" /></a></p>
  <p>I notice that the font for my dev environment is bigger than the font of my prod environment.</p>
  <p>Dev env:</p>
  <p><a href="https://i.stack.imgur.com/ZUTHY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZUTHY.png" alt="enter image description here" /></a></p>
  <p>Prod env:</p>
  <p><a href="https://i.stack.imgur.com/kazCI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kazCI.png" alt="enter image description here" /></a></p>
  <p>I don't understand that why there is a difference and if this is the cause of the issue.</p>
  <p>After setting the <code>fonts</code> explicitly to <code>courier new</code>, the editor options are</p>
  <pre><code>editor options are   {selectionStyle: &quot;line&quot;, highlightActiveLine: true, highlightSelectedWord: true, readOnly: false, copyWithEmptySelection: false, …}animatedScroll: falseautoScrollEditorIntoView: undefinedbehavioursEnabled: truecopyWithEmptySelection: falsecursorStyle: &quot;ace&quot;displayIndentGuides: truedragDelay: 0dragEnabled: trueenableBlockSelect: trueenableMultiselect: truefadeFoldWidgets: falsefirstLineNumber: 1fixedWidthGutter: undefinedfocusTimeout: 0foldStyle: &quot;markbegin&quot;fontFamily: &quot;Courier New&quot;fontSize: &quot;14pt&quot;hScrollBarAlwaysVisible: falsehasCssTransforms: undefinedhighlightActiveLine: truehighlightGutterLine: truehighlightSelectedWord: trueindentedSoftWrap: truekeyboardHandler: undefinedmaxLines: undefinedmaxPixelHeight: 0mergeUndoDeltas: trueminLines: undefinedmode: &quot;ace/mode/html&quot;navigateWithinSoftTabs: falsenewLineMode: &quot;auto&quot;overwrite: falseplaceholder: undefinedprintMargin: 80printMarginColumn: 80readOnly: falserelativeLineNumbers: undefinedscrollPastEnd: 0scrollSpeed: 2selectionStyle: &quot;line&quot;showFoldWidgets: trueshowGutter: trueshowInvisibles: falseshowLineNumbers: trueshowPrintMargin: truetabSize: 4theme: &quot;ace/theme/eclipse&quot;tooltipFollowsMouse: trueuseSoftTabs: trueuseTextareaForIME: trueuseWorker: truevScrollBarAlwaysVisible: falsewrap: &quot;off&quot;wrapBehavioursEnabled: true__proto__: Object
  </code></pre>
  <h2>Update</h2>
  <p>It seems each line in the editor gets a class <code>ace_gutter-cell</code>. This class is not the same the <code>dev</code> and <code>prod</code> environment. <code>position:absolute</code> is missing in <code>prod</code>. See the images below. Am I picking differing builds of <code>ace</code>?</p>
  <p>Dev:</p>
  <p><a href="https://i.stack.imgur.com/HAw93.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HAw93.png" alt="enter image description here" /></a></p>
  <p>Prod:</p>
  <p><a href="https://i.stack.imgur.com/FHnjv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FHnjv.png" alt="enter image description here" /></a></p>