Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Smoothing rotation of album #626

Closed
wants to merge 3 commits into from
Closed

Smoothing rotation of album #626

wants to merge 3 commits into from

Conversation

qligier
Copy link
Contributor

@qligier qligier commented Sep 24, 2016

This helps to smooth the rotated album on hover.

Preview in Chrome (left is before, right is after):
aliasing_chrome

Preview in Firefox (left is before, right is after):
aliasing_firefox

@electerious
Copy link
Owner

Chrome creates a new composited layer around the image when using backface-visibility: hidden. It's the same when using will-change: transform. I can't see any difference in Firefox. Adding the CSS doesn't change anything for me, but adding will-change: transform does. Using this for all images (and not only on :hover) has a negative performance impact for big albums. Using it for :hover only is a good idea, as it only effect one album at a time. All browsers are creating a composited layer around the image during the animation/transition. The border looks good and gets worse when the browser removes the composited layer. Keeping it fixes the problem.

Lets simply use will-change: transform on :hover! :) Will add it manually. Thanks for the idea.

electerious added a commit that referenced this pull request Sep 25, 2016
Keep the composited layer created by the browser during the animation. Makes the border of the transformed thumb look better.
@qligier
Copy link
Contributor Author

qligier commented Sep 25, 2016

There is a difference in Firefox but much less than in Chrome (you see it at the end of the rotation, when the composited layer is deleted).
will-change: transform has the same effect as backface-visibility: hidden and transform-style: preserve-3d; in Chrome and Firefox from what I see.

@electerious electerious mentioned this pull request Oct 25, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants