CSS джиттер масштабирования размера шрифта

Question

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

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

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

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

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>

SCSS

//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");
});

Answer 1

Во втором примере источник преобразования неявно изменяется при наведении курсора по умолчанию. 50% 50% в 0% 50%отсюда дрожание. Вы должны установить transform-origin: 10px 50%; (10 пикселей вместо 0, потому что мы стремимся зафиксировать положение первой буквы, а не внешнего края заполнения, поэтому мы устанавливаем начало преобразования для внутреннего края области заполнения) в состояние по умолчанию:li и удалить его из .mediumScale/.largeScale классы.