Переход CSS оказывает нежелательное влияние на первые буквы текста внутри блока, когда наводится на него

Question

У меня есть простой блок с текстом внутри, и все выглядит нормально, но когда я наводил курсор на блок, текст действует странно: первые буквы каждого слова перемещаются вниз. Я не сталкиваюсь с той же проблемой, когда я удаляю переход из кода. Я искал другие вопросы, связанные с проблемами перехода CSS, но не смог найти решение этой проблемы. Может ли кто-нибудь объяснить мне, пожалуйста, почему это происходит и как избежать такого поведения?

Вот codepen

Вот link, где вы можете увидеть, как он ведет себя

HTML

<div class="container"> 
    <div class="box grow"> 
    <p>Box grow</p> 
    </div> 
</div> 

CSS

body { 
    background-color: #ddd; 
} 

.container { 
    margin-top: 30px; 
    text-align: center; 
} 

.box { 
    display: inline-block; 
    width: 100px; 
    line-height: normal; 
    background-color: #fff; 
    border-radius: 5px; 
    transition: 0.5s cubic-bezier(0.29, 0.01, 0.72, 1); 
} 

.grow:hover { 
    transform: scale(1.15, 1.15); 
} 

Answer 1

Чтобы устранить эту проблему, можете добавить backface-visibility: hidden; к вам .box div, а затем установите translate3d(0, 0, 0); на паре.

CSS

.box { 
    backface-visibility: hidden; 
} 

.grow:hover { 
    transform: scale(1.15, 1.15) translate3d(0, 0, 0); 
} 

CodePen