Редактор Ace, положение курсора над фактическим текстом

У меня есть этот код на странице Razor:

<td>
      <textarea class="MSSQL" id="MyId">
          My code
      </textarea>
</td>

И я использую jquery для создания редактора ace:

$('textarea.MSSQL').each(function () {
            var textarea = $(this);
            console.log(this);
            var editDiv2 = $('<div>', {
                position: 'absolute',
                width: "100%",
                height: "200px",
                'class': textarea.attr('class'),
                'Id': textarea.attr('id')
            }).insertBefore(textarea);
            textarea.css('visibility', 'hidden');
            var editor1 = ace.edit(editDiv2[0]);
            editor1.getSession().setValue(textarea.val().trim());
            editor1.getSession().setMode("ace/mode/sql");
            editor1.setTheme("ace/theme/sqlserver");
            editor1.setReadOnly(true);
            editor1.getSession().setUseWrapMode(true);
        });

Все работает нормально, кроме курсора редактора, его положение выше фактического текста, я гуглил о проблеме, в большинстве случаев курсор находится на несколько шагов вправо или влево от фактического текста и решение было изменить шрифт на monospace. Но это не так. Какие-либо предложения?!

Цитата