Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Blurry text when translate3d is a decimal

See original GitHub issue

In Chrome, here is a comparison of slides containing text, and the css that is applied to .glide__slides for each after sliding:

Screen Shot 2019-03-12 at 11 29 57 AM transform: translate3d(-227.33px, 0px, 0px);

Screen Shot 2019-03-12 at 11 30 13 AM transform: translate3d(-227px, 0px, 0px);

To replicate, just change the width of your browser and watch the text become blurry and crisp depending on the transform.

Is there any way to round the calculations on the transforms?

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:5

Top GitHub Comments

2reactions

renakdupcommented, Mar 14, 2019

I have the same bug. When I set gap: 24 or 25, 26 for glide config. But when I set gap: 30, this blur effect is not repeated. And traslate3d has decimal number

0reactions

GabrielePuiacommented, Dec 22, 2022

Any news?

Top Results From Across the Web

WebKit: Blurry text with css scale + translate3d - Stack Overflow

A small addittion: in last Chrome i stucked with problem like when using not rounded values for translate3d . Rounding them fixed all...

521364 - Transformed text at fractional offsets is very blurry.

The root issue is that that fractional transforms lead to very blurry text rendering when composited.

[Solved] Transforms cause font-smoothing weirdness in Webkit

A simple `:hover { transform: scale(1.1); }` effect was being applied to a button and the text went blurry during scaling, then snapped...

Scaling an element becomes pixelated - GSAP - GreenSock

Usually when i build a 3D cube and have text on the faces, I fix the blurry text by giving all the cubes...

Remove blur from text CSS

css - quality - webkit transform blurry text CSS transition effect makes image ... item elements blur if the transform:translate3d values has decimal...