1717277 - Artifacts on emoji picker button on discord.com

Status: NEW

(Core :: Graphics: WebRender, defect, P3)

Description

[Gregory Pappas [:gregp]]

Attachment: comparison.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Visit discord.com/login and login
Enter DM Channel or Guild Channel
Hover over emoji picker button

I tested on Windows 10 Pro 21H1 on a 1600x900 display with 100% scaling in Firefox and Chromium

Actual results:

Notice artifacts around perimeter of emoji during animation
These are not present in Chromium

Expected results:

Animation should be as smooth as in Chromium

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Privacy: Anti-Tracking' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Gregory Pappas [:gregp]]

Update: This seems to be a problem with the combination of sprites (background-position) and css transform (scale). I replaced the sprite background-image on the page with a normal image and the artifacts seem to go away (animation is still choppy though).

Comment 3

[Brad Werth [:bradwerth] | Out until July 3]

I can reproduce at least part of the issue: for me the animation seems to jitter with varying offsets as it expands and then settles into its final size and position. I'm sure the animation would look better if it was always consistently centered, regardless of any other choppiness. Hiro, can you take a look?

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Can someone attach a simple test case?

Comment 5

[Gregory Pappas [:gregp]]

Attachment: testcase001.html

This seems to reproduce the issue. I will note that the Discord.com animation uses JS. The effect seems to be the same with css transitions though.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Thanks for the test case!

The problem here is that when the emoji is scaled the position of the emoji is slightly snapped to left/downwards, right? If so, it's WebRender specific, I don't see the issue with the layers backend.

Presumably there's some rounding issues or pixel snap issues in WebRender backend.

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

Comment 8

[Brad Werth [:bradwerth] | Out until July 3]

(In reply to Gregory Pappas from comment #5)

Created attachment 9229989 [details]
testcase001.html

This seems to reproduce the issue. I will note that the Discord.com animation uses JS. The effect seems to be the same with css transitions though.

For me, this testcase isn't replicating the issue as seen on Discord. On Discord, I get jittery centering throughout the animation, whether using WebRender or using layers backend. With this testcase, I get some re-centering at the start and end of the animation (whether using WebRender or layers) but none during the animation and the overall effect is much less noticeable. It's probably even an acceptable level of pre and post animation jitter. So perhaps the JS-based animation method in use on Discord is a key factor.