Удаление значительного скачка / увеличения размера при автоматическом изменении размера текста с помощью jQuery изменяемого размера

Question

Я использую следующий код для автоматического увеличения или уменьшения размера текста в следующем элементе .text-block:

<table class="text-block">
  <tr><td><span style="font-size:68px;">TEXT TEXT</span></td></tr>
</table>

jQuery:

  jQuery('.text-block').draggable().resizable({
    handles: "ne, se, sw, nw",
    resize: function(event, ui) {
    // handle fontsize here
    console.log(ui.size); // gives you the current size of the div
    var size = ui.size;
    // something like this change the values according to your requirements

    jQuery(this).find('span').css("font-size", (size.width * size.height)/200 + "px");

  }
  });

В целом, это работает довольно хорошо, но я обнаружил, что, как только коробка достигает определенной ширины, если я go отрегулирую ее, размер всего подпрыгивает до гораздо большего размера, чем предполагалось. Может быть, математика должна быть скорректирована? После этого первого скачка по размеру он работает плавно.

Вот скрипка:

Ссылка на JsFiddle