Масштабирование размера шрифта CSS

Я пытаюсь масштабировать размеры шрифта, чтобы создать эффект линзы «рыбий глаз» при наведении.

Использование CSS для увеличения размера шрифта при переходе вызывает эффект дрожания.

Использование масштаба преобразования создает нежелательный эффект, когда левая часть текста немного сдвигается влево перед масштабированием.

Я создал ручку, чтобы проиллюстрировать два эффекта рядом. В идеале хотелось бы эффект слева с плавностью справа

https://codepen.io/sygad1/pen/QMWqXy

Любые идеи для достижения этого?

Ваше здоровье

HTML

  <ul class="fish-eye-text-size">
    <li>Font size scaling</li>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
    <li>Menu item four</li>
    <li>Menu item five</li>
    <li>Menu item six</li>
    <li>Menu item seven</li>
    <li>Menu item eight</li>
    <li>Menu item nine</li>
    <li>Menu item ten</li>
  </ul>

  <ul class="fish-eye-scaling">
    <li>CSS scaling</li>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
    <li>Menu item four</li>
    <li>Menu item five</li>
    <li>Menu item six</li>
    <li>Menu item seven</li>
    <li>Menu item eight</li>
    <li>Menu item nine</li>
    <li>Menu item ten</li>
  </ul>

СКСС

//Text size
.mediumText {
  font-size:1.4rem;
}
.largeText {
  font-size:1.7rem;
}



// CSS Scaling
.mediumScale {
  transform: scale(1.3);
  transform-origin: 0% 50%;
}
.largeScale {
  transform: scale(1.5);
  transform-origin: 0% 50%;
}




ul {
  margin:0 auto;
  padding:0;
  list-style:none;
  width:250px;
  overflow:hidden;
  float:left;
  margin:20px;
  background:#e1e1e1;

  li {
    cursor: pointer;
    transition:all 0.4s;
    height:30px;
    position:relative;
    padding:10px;
    will-change: transform;
  } 

}

JS

// Font size
$(".fish-eye-text-size li").on("mouseenter", function() {
  $(this).addClass("largeText");
  $(this).next().addClass("mediumText");
  $(this).prev().addClass("mediumText");
});

$(".fish-eye-text-size li").on("mouseleave", function() {
  $(this).removeClass("largeText");
  $(this).next().removeClass("mediumText");
  $(this).prev().removeClass("mediumText");
});

// CSS Scaling
$(".fish-eye-scaling li").on("mouseenter", function() {
  $(this).addClass("largeScale");
  $(this).next().addClass("mediumScale");
  $(this).prev().addClass("mediumScale");
});

$(".fish-eye-scaling li").on("mouseleave", function() {
  $(this).removeClass("largeScale");
  $(this).next().removeClass("mediumScale");
  $(this).prev().removeClass("mediumScale");
});