Chrome Is Now Blurring Text When Using Transform Translatey with Percent

Blurry font after applying transform

scale was the biggest culprit here. Scaling up over 1 causes blur, so rather than scaling up when hovered, I had the element scale down and up to 1 when hovered.

Additionally, removing perspective from transformation yielded crisp text and images.

Element transforms to half-pixel and text is now blurry

Well after some more digging, I decided using flexbox would be the easiest way to achieve this vertical centering without blurry text (As suggested by Vestride). Fortunately it doesn't seem to cause any complications with the Bootstrap carousel when applied as such:

div.carousel-caption{
position: static;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}

It seems like it should work for most browsers according to this. IE might suffer a little. But it worked fine for my IE 11.

CSS transform animation causes visual glitch in subsequent blurred elements (Chrome only)

If you use transform: translateY(20px) instead of margin-top: 20px the bug will be fixed.

button {
width: 400px;
height: 60px;
transition: transform 500ms;
}

button:hover {
transform: translateY(-4px);
}

.container {
transform: translateY(20px);
overflow: hidden; /* remove overflow: hidden to see blur */
height: 200px;
width: 400px;
}

.blurred {
height: 100%;
width: 100%;
overflow: hidden;
background: black;
filter: blur(10px);
transform: scale(1.2);
}
<button>Hover me</button>

<div class="container">
<div class="blurred" />
</div>


Related Topics



Leave a reply



Submit