-
Notifications
You must be signed in to change notification settings - Fork 680
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
Fix animation jitter when clicking the "Join a channel" button #1917
Fix animation jitter when clicking the "Join a channel" button #1917
Conversation
client/css/style.css
Outdated
@@ -667,7 +667,8 @@ kbd { | |||
} | |||
|
|||
#sidebar .lobby .add-channel.opened { | |||
transform: rotate(45deg); | |||
// translateZ(0) enables hardware acceleration, this is to avoid jittering when animiating |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How on Earth did that pass our CSS linter lol?!
Even my local linter (also stylelint) reported this, and actually whatever error I make in the CSS, npm run lint:css
doesn't flag. There is something wrong in there, I'ma look right after...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
animiating
:)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Too used to writing SCSS :), fixing
I can't see this issue on my laptop (macOS, Chrome) or phone (iOS, Safari). I'll try with an old phone (Android, Chrome) to see what happens there. Just curious, what browser are you using? The rotation doesn't seem centered, which is something I'm not seeing either. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SCSS comment in the CSS file, but I'll be 👍 once this is fixed.
bfe4b53
to
7a0c768
Compare
Fixed comment now |
7a0c768
to
dfe4b2f
Compare
(these gifs shows the issue very poorly)
Before
After