ブロック内のテキストの最初の文字にCSSトランジションが影響を与える場合があります。

Question

テキストが入った単純なブロックがありますが、すべてが正常に見えますが、テキストが奇妙に作用する：各単語の最初の文字が下に移動している。私はコードからの移行を取り除いても同じ問題に直面しません。私はCSSの移行問題に関連する他の質問を検索しましたが、この問題の解決策を見つけることができませんでした。誰かが私に説明してくれましたか、どうしてこのようなことが起きているのですか？ここで

はここcodepen

であるあなたは、あなたはそれが

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

をどのように動作するかを見ることができlink、ありますあなたに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