React-slick: Text blurry in chrome when using "tranform:translate3d(x,y,z)"

[HuiguangChu]

could you change it to translateX for WebkitTransform like you did for msTransform?

[vramana]

Shouldn't this be a bug in chrome? I am not sure how changing to translateX will solve your problem because they are literally same API except translate3d moves in two other directions. Have you tried this out?

Which version of chrome are you using? Can you show a screenshots of using translate3d and translateX? Or just simply where you are having the blurry text? Why do you think its caused by translate3d?

[HuiguangChu]

okay, you can compare two screenshots, one is using translateX and one is
using translate3d.
Actually, translate3d cause text blurry in chrome is the common issue.

2015-08-04 15:56 GMT+02:00 Ramana Venkata [email protected]:

Shouldn't this be a bug in chrome? I am not sure how changing to
translateX will solve your problem because they are literally same API
except translate3d moves in two other directions. Have you tried this
out?

Which version of chrome are you using? Can you show a screenshots of using
translate3d and translateX? Or just simply where you are having the
blurry text? Why do you think its caused by translate3d?

—
Reply to this email directly or view it on GitHub
https://github.com/akiran/react-slick/issues/94#issuecomment-127621443.

[vramana]

Can you check if this works http://stackoverflow.com/a/7477166/1117168 ??

[HuiguangChu]

thank you, i did that, it did not work. I don't get the point that why you are using 3d, as I can see you set the y and z is 0. why you don't using translateX?, then you don't need to fix bug for IE as well

[vramana]

I am slightly reluctant to do that because I want to know what exactly is the cause of problem and what is the best way to solve it. I am trying to read whatever I can find.

This question states using translateX causes problems. According to this reddit comment, any type of transform can cause the blur. Sometimes the fixes work, sometimes they don't.

[vramana]

@akiran How do you want to solve this?

[akiran]

@HuiguangChu Original slick from which we ported this also uses translate3D
https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1696

[HuiguangChu]

I know it is using 3d. But it is actually a bug right now in chrome. translateX(100) does the same as translate3d(100,0,0).

Why do you guys still want to keep a buggy code?

From: Kiran [mailto:[email protected]]
Sent: Tuesday, August 4, 2015 5:35 PM
To: akiran/react-slick [email protected]
Cc: Huiguang Chu [email protected]
Subject: Re: [react-slick] Text blurry in chrome when using "tranform:translate3d(x,y,z)" (#94)

@HuiguangChu https://github.com/HuiguangChu Original slick from which we ported this also uses translate3D
https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1696

—
Reply to this email directly or view it on GitHub https://github.com/akiran/react-slick/issues/94#issuecomment-127652164 . https://github.com/notifications/beacon/ADUim63CKDefXvBZ3Xsu2bjSFTFTAY0Zks5okNMtgaJpZM4FlQwP.gif

[gtyanchev]

I'm experiencing blurry text too.
It seems to happen when non-integer values are given to translate3d.
Here is an example: blurry, ok

And it's happening only on safari and chrome, so it's mostly a webkit bug. But still maybe it can be fixed just by rounding the values. I've checked slick and it looks like it uses only integer values for translations and "slick-slide" width.

[akiran]

@gtqnchev I will try rounding values passed to translate3d and see if this issue is fixed

[cjke]

@akiran Was the rounded values feature pushed into master at all?

EDIT: I should mention that I am currently doing the following in the afterChange callback and it works at ridding the world of blur:

    onChange(index:number) {
        const track = this.wrapper.getElementsByClassName("slick-track")[0];
        const current = this.wrapper.getElementsByClassName("slick-slide slick-active")[0];
        track.style.transform = track.style.transform.replace(/\.[0-9]+px/, "px");
        current.style.width = current.style.width.replace(/\.[0-9]+px/, "px");
    } 

Now obviously regex'ing out the fractions is not ideal, but is a work around, as we have slick in a prod app and needed to be cleaned up.

[edennington]

@akiran looks like ghostd implemented a fix for rounding values https://github.com/ghostd/react-slick/commit/eef3fc4d856fcf3b34fd49c35dde8afa920c8523. Any chance we can get this into master?

[svn1991]

Hi @akiran

Is there an update on whether this issue is fixed?

[cuquo]

It's only happening in not-retina devices and when either X or Y final position it's not an integer, the above PR should fix that. Do you have any idea of when this will go into master? btw, thanks for porting this library.

[vinceprofeta]

+1

[vinceprofeta]

@akiran can you merge the PR

[evert-smit]

Thanks for a great component!
I ran into this issue too, it would be nice if the fix could be merged.

[xxronis]

+1

[ryangiglio]

+1

[dsl-src]

+1

[hirusi]

Has anyone tried the 0.19.0 release to see if e10e4fb fixed the issue for them?

[laveesingh]

I can't regenerate the issue. And I don't think it exists anymore. If someone disagrees and the issue still persists for them, please feel free to create a codesandbox demo for the same and open the issue.