text - CSS font size scaling jitter -

i'm trying scale font sizes create fish eye lens effect on hover.

using css increase font size transition causes jitter effect.

using transform scale creates undesirable effect left hand side of text moves on left little before scaling up.

i've created pen illustrate 2 effects side side. ideally, i'd effect on left smoothness of right

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

any ideas achieve this?

cheers

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

in second example, transform origin implicitly changes on hover default 50% 50% 0% 50%, hence jittering. should set transform-origin: 10px 50%; (10px instead of 0 because aim fix position of first letter, not padding outer edge, set transform origin inner edge of padding area) to default state of li , remove .mediumscale/.largescale classes.