Still blured content

[nmihalyov]

I saw this issue which was fixed by rounding values, but in my case the content is still blured.

Adding perspective: 1000px to the content may help for a bit, but it doesn't work at some browser like safari (especially, on mobile devices)

Here you can see how it looks like.

You can see live example here: nmihalyov.github.io/dist
To see the effect disable perspective: 1000px rule at .works * in devtools

[pawelgrzybek]

Hi.

Sorry for months of waiting. I investigated your issue. It is a strange one and the solution would be to change the carousel behaviour to use 2d transform instead of 3d. It may come with some performance implications and I really don't want to do it. Another solution would be disabling transform 3d when the carousel is not transitioned and use it only when is dragged / sliding (thats exactly what great Flickity does).

I'll keep this issue open and I need to review how much time and changes are needed on top of the current codebase to resolve it and come back to you at some point.

Thanks again for reporting this issue.

[pawelgrzybek]

Hi.

After quick investigation is found out that it has nothing to do with Siema. Your example taken from your website is an edge case — you skew the wrapper and then skew back all the inside content. Your solution with perspective: 1000px; totally makes sense as it forces a Siema to render on a separated layer. The transform: translateZ(0) or will-change: transform; will give you the same result. Your solution is absolutely correct and there isn't much different that you can do about it. Hopefully ut makes sense.

Have a great day and thanks for contribution 🥑