1452337 - Reddit vote buttons have glitches at the edges

Status: NEW

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

Description

[Crend King]

Attachment: vote.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180406220121

Steps to reproduce:

1. Go to https://www.reddit.com/r/firefox/


Actual results:

Observe that the black vote buttons have glitches at the right and bottom edges (see enlarged screenshots)


Expected results:

The edges should be clean (as demonstrated in the screenshots)

Comment 1

[Darkspirit]

Debian Testing, KDE, Radeon RX480, 2560x1440
at 110% zoom and higher zoom levels. Does not happen without WebRender.

mozregression --good 2017-05-05 --bad 2017-07-05 --pref layers.acceleration.force-enabled:true gfx.webrender.enabled:true gfx.webrendest.enabled:true gfx.webrender.blob-images:true image.mem.shared:true layout.display-list.retain:false startup.homepage_welcome_url:"https://www.reddit.com/r/firefox/"
> 7:01.24 INFO: Last good revision: 5a8f2dcbeac0677b5aae0f9fd43d6a33309b4a6b
> 7:01.24 INFO: First bad revision: 979f11deabd01d6cb897d064d3d9ed11ea8baa93
> 7:01.24 INFO: Pushlog:
> https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=5a8f2dcbeac0677b5aae0f9fd43d6a33309b4a6b&tochange=979f11deabd01d6cb897d064d3d9ed11ea8baa93
> 
> 7:02.69 ERROR: Unable to exploit the merge commit. Origin branch is mozilla-central, and the commit message for 979f11de was:
> Merge graphics to m-c a=merge a=release

Comment 2

[Darkspirit]

Reconfirmed with proprietary GTX 1060 on Debian Testing.

Comment 3

[Darkspirit]

Attachment: Screenshot_20180612_164631.png

PhpMyAdmin is also affected by this.

Comment 4

[Andrew Osmond [:aosmond] (he/him)]

Looks like the arrows are pulled out of a larger resource, and we are getting part of the blue down arrow positioned below the black arrow spilling over. See https://b.thumbs.redditmedia.com/cHIY4EWAoBDdYwoV74ejKQRlpMs7ibQO2EcfRSR7NpQ.png.

Comment 5

[Andrew Osmond [:aosmond] (he/him)]

(In reply to Jan Andre Ikenmeyer [:darkspirit] from comment #3)
> Created attachment 8984998 [details]
> Screenshot_20180612_164631.png
> 
> PhpMyAdmin is also affected by this.

Looking at their demo at https://demo.phpmyadmin.net/master-config/, the images are broken out now so I don't see it, but I'm guessing that changed and it is the same problem.

Comment 6

[Crend King]

Thank you for sharing the discovery. In fact, if we change the icon size from 17x17 to 18x18 in CSS, even without WebRender we can still see the glitch.

Comment 7

[Andrew Osmond [:aosmond] (he/him)]

Attachment: Simplified test case, v1

Just contains the poorly sampled arrow.

Comment 8

[Jeff Muizelaar [:jrmuizel]]

So here's a more elaborate test case: https://jrmuizel.github.io/implementation-tests/background-leaking.html

Edge seems to have the same behaviour as us. So I'm inclined to not block on this. Chrome and Safari both clamp to the source rect so we should probably do that in the future.

Comment 9

[Andrew Osmond [:aosmond] (he/him)]

For clarity, we have ImageRegion::Restriction on the non-WebRender path which is how we prevent the glitches today.

https://searchfox.org/mozilla-central/rev/71ef4447db179639be9eff4471f32a95423962d7/layout/base/nsLayoutUtils.cpp#6771
https://searchfox.org/mozilla-central/rev/71ef4447db179639be9eff4471f32a95423962d7/gfx/thebes/gfxUtils.cpp#554

Comment 10

[Markus Stange [:mstange]]

Please re-test bug 1447093 after fixing this, it's probably the same issue.