CSS transition have an unwanted effect on the first letters of the text within a block, when hover over it

Question

I have a simple block with a text within and everything looks normal, but when I hover over a block, in the process the text acts weird: first letters of each word are moving down. I don't face the same problem when I remove transition from the code. I've searched through other questions connected with CSS transition problems, but couldn't find a solution to this problem. Could somebody explain me, please, why is this happening and how to avoid such behavior?

Here is the codepen

Here is the link, where you can see how it behaves

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

@Paulie_D, it was the first question, where I looked for the answer and it doesn't have a solution for fixing the problem with the first letter moving effect. As for blurry text, I've edited my question — Olha Vadiasova, Oct 18 '16 at 15:20

score 1 · Answer 1 · answered Oct 18 '16 at 14:37

1

To fix the issue, you can add backface-visibility: hidden; to you .box div, and then set translate3d(0, 0, 0); on the hover.

CSS

.box {
  backface-visibility: hidden;
}

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

CodePen

answered Oct 18 '16 at 14:37

Hunter Turner

6,804
11
41
56

Thanks so much for answering, but there is still a problem with the first letters. I've edited the question and provided the link to show where the problem is – Olha Vadiasova Oct 18 '16 at 15:05
@Olga, I don't see that happening in my CodePen. Which browser are you using? – Hunter Turner Oct 18 '16 at 15:07
I use Chrome and I've also checked in Opera, Firefox, IE – Olha Vadiasova Oct 18 '16 at 15:11
I'm not able to reproduce your issue on my Mac in Chrome, Firefox, or Safari. – Hunter Turner Oct 18 '16 at 15:16
Then maybe it has something to do with Windows? Anyway, thank you! – Olha Vadiasova Oct 18 '16 at 15:33

CSS transition have an unwanted effect on the first letters of the text within a block, when hover over it

1 Answers1