CODEWITHSUNDEEP
htmlcsshovertransitionblur
JoSch
JoSch

Reputation: 990

Web Design/CSS: Blurred text jitters when being "un-blurred" on hover

Please take a look at this jsfiddle: https://jsfiddle.net/heLwx9bz/

I am trying to "un-blur" some text on hover, with a transition. Notice how the text slightly jitters when transitioning to blur(0px), it jumps up and left by about 1px. Why is that and how can I avoid it? The jittering only occurs when a transition is added to the property change.

Here's code of my test case, very simple:

p {
  font-size: 200px;
}

.blur {
  filter: blur(2.5px);
  transition: 0.7s -webkit-filter;
}

.blur:hover {
  filter: blur(0px);
}
<div>
  <p class="blur">
    TEST
  </p>
</div>

Upvotes: 0

Views: 526

Answers (2)

CyberAP
CyberAP

Reputation: 1233

If the solution with -webkit-transform: translateZ(0); doesn't work for you try setting unblurred version to filter: blur(.2px).

p {
  font-size: 200px;
}

.blur {
  filter: blur(2.5px);
  transition: 0.7s -webkit-filter;
}

.blur:hover {
  filter: blur(0.2px);
}
<div>
  <p class="blur">
    TEST
  </p>
</div>

Upvotes: 1

user7207170
user7207170

Reputation:

This is a Google Chrome issue.

Certain css transitions will be hardware accelerated. What this means is that they will use the power of your computers graphics card to apply the transitions – and since the graphics card is optimized for graphical effects, this makes the transitions much smoother.

The thing is transitions don’t always use hardware acceleration, but if you apply a specific css rule then they will force it to enable. One of the css properties that will enable hardware acceleration is the transform rules. So apply a css transform and the graphics card does all the work.

Just add -webkit-transform: translateZ(0); to the code and it will be fixed.

p {
  font-size: 200px;
}

.blur {
  filter: blur(2.5px);
  transition: 0.7s -webkit-filter;
  -webkit-transform: translateZ(0);
}

.blur:hover {
  filter: blur(0px);
}
<div>
  <p class="blur">
    TEST
  </p>
</div>

Upvotes: 2

Related Questions