Using a percentage value with Transform: translate means it positions your element with sub-pixel accuracy which is causing blurring after transition.

[stevenhales]

The issue is a mirror of this stackoverflow post: https://stackoverflow.com/questions/42669491/css-translate-with-percentage-causes-blurred-image

The easy fix appears to be adding a calc which adds 0.5px for rounding, see my example below:

style="position: relative; white-space: nowrap; min-height: 100%; direction: ltr; transform: translateX(-170%);"

to

style="position: relative; white-space: nowrap; min-height: 100%; direction: ltr; transform: translateX(-170% + 0.5px);"

[jedwards1211]

Yeah, I have seen this before in some cases. So there are several problems with adding 0.5px:

• On retina screens 0.5px means 0.5 logical pixels, which actually translates to 1 device pixel
• Because of the subpixel positioning, + 0.5px is only going to round to the nearest whole pixel if width * 1.7 is off by exactly 0.5. For instance, if the view is 486px wide, the offset is 486 * 170% = 826.1999999999999.

So I think the first thing I should experiment with is measuring the width of the container and adding (I think, see how crazy this gets):

-${(width * scale * activeIndex) % (1 / devicePixelRatio)}px

(devicePixelRatio is 2 for a retina screen where there are 2 device pixels per logical pixel)

But for this to always work, I'll have to use element resize detection, so this will take some caution.

If you're able to guarantee that your view width is a multiple of 10 pixels, it should work around the issue for now.

[jedwards1211]

AFAICT there has to be a calc inside translateX right?

translateX(calc(-170% + 0.5px))

[stevenhales]

Hi man.

Thanks for the quick response. I have got around this issue by having a child container with a translate by 0.5px which fixes it (altho a hack). But I understand from what you have said the proposed workaround won't suffice to cover 100% of users. Thanks for the awesome lib!

[jedwards1211]

🎉 This issue has been resolved in version 4.6.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀