1427063 - Strange display of transparent background in Google Image Search

Status: RESOLVED FIXED

(Core :: Graphics, defect, P3)

Description

[5silentrain]

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171206182557

Steps to reproduce:

For an example, open this link: https://www.google.com.ua/search?q=CentOS&client=firefox-b&dcr=0&tbm=isch&tbo=u&source=univ&sa=X&ved=0ahUKEwit3--HqabYAhXIFZoKHbGXBP4QiR4ImQE&biw=1920&bih=947#imgrc=le4CAryegwGpcM:


Actual results:

Strange display of transparent background in Google Image Search: http://jpegshare.net/79/a9/79a91e9de947f5dcf6cf320fb1685d16.jpg.html


Expected results:

In comparison with Chrome: http://jpegshare.net/bb/1f/bb1f8a816952d62ff84f9778af143525.jpg.html

Comment 1

[Asif Youssuff]

For what it is worth, not seeing this in Firefox nightly on macOS. Will try on Firefox on Windows (stable and nightly later today hopefully). 

5silentrain can you reproduce this in a fresh profile?

Comment 2

[YF (Yang)]

I see this issue (class="irc_mi") in Fx58b13 & Fx57.0.3, work fine (class="irc_mut iDVskf3v66ro-HwpH6ZlgJaI", white background) in Fx56.0.2, Win10.

.irc_mi {
    background-color: #fff;
    background-image: linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef),linear-gradient(45deg,#efefef 25%,transparent 25%,transparent 75%,#efefef 75%,#efefef);
    ...

Comment 3

[Stefan [:StefanG_QA]]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0 (20171229100308)

I've managed to reproduce the issue in a fresh profile on Windows 10 using latest Nightly build and Fx57.0.3.
The issue is not reproducible on MacOS 10.13 nor on Ubuntu 16.04.

Comment 4

[5silentrain]

(In reply to Asif Youssuff from comment #1)
> 5silentrain can you reproduce this in a fresh profile?

Yes!

Comment 5

[Mike Taylor [:miketaylr]]

Attachment: bg-firefox.jpg

Comment 6

[Mike Taylor [:miketaylr]]

Attachment: bg-chrome.jpg

Comment 7

[Mike Taylor [:miketaylr]]

Attachment: tc.html

This tc reproduces the checkboard line thingy in Windows 10 for me.

Comment 8

[Mike Taylor [:miketaylr]]

Attachment: screenshot of tc.html in windows 10

Comment 9

[Mike Taylor [:miketaylr]]

Milan, is this a known graphics issue? (see screenshot of tc.html in windows 10)

We get the same content as Chrome, so this likely isn't a site bug.

Comment 10

[Milan Sreckovic [:milan] (needinfo for best results)]

This shows up with D2D content only.

Comment 11

[Milan Sreckovic [:milan] (needinfo for best results)]

Bas, is this something that D2D does wrong, or something where we mess up?

Comment 12

[Bas Schouten (:bas.schouten)]

(In reply to Milan Sreckovic [:milan] from comment #11)
> Bas, is this something that D2D does wrong, or something where we mess up?

Hrm, I really want to say D2D, this can't really be a bug in the D2D backend since we don't really manipulate any of the graphics primitives on that level before passing it to D2D. (Fwiw I did check this on edge just for good measure and it doesn't reproduce the issue) Having said that, we do do some special things for gradients and repeating them iirc. I will look into this.

Comment 13

[Bas Schouten (:bas.schouten)]

Alright, it doesn't look like we still have 'special' code inside D2D to deal with Gradients. I suspect this has something to do with the way D2D draws gradients which doesn't snap things in the same way Skia does. The bug has to be fixed somewhere inside nsCSSGradientRenderer::Paint I think, where we do some strange things for repeating gradients. Ryan, looking at the blame for that file you're the only person still at Mozilla who has recently dealt with this code, do you have any idea what might be the problem here?

Comment 14

[Bas Schouten (:bas.schouten)]

To be a little more precise, I suspect we're manually drawing the gradient repeated along the diagonal axis, in this area, the edges of the two repeats subtly 'overlap' causing antialiasing artifacts (for example) 0.5 and 0.5 covered  covered pixels both covered with 0.5 transparency now become 0.75 transparent. (0.5 * (1 - 0.5) + 0.5).

Comment 15

[Ryan Hunt [:rhunt]]

Okay so we're running into two issues here, the first is our handling of premultiplied alpha color stops [1]

We insert additional stops to fake premultiplied alpha transitions between stops as our backends transition color stops with straight alpha. This code is causing us to do a weird transition between #efefef to transparent. If you replace transparent with white, the dark gray disapears.

I don't really understand how this code works. It looks like both Skia and Direct2D support native premultiplied color transitions with flags. [2][3] From my limited testing using this flag with D2D and removing this code fixes the dark gray.

The other issue is that there appears to be some white gaps between tiles even with this change. We pixel snap each repetition of a tile individually. Commenting out the code that does that made some edges a little more blurry, but removed the gaps and made it look okay and very close to chrome.

I think nical was potentially going to make some changes to our pixel snapping here, I'd be curious if that helps us here.

[1] https://searchfox.org/mozilla-central/rev/f65d7528e34ef1a7665b4a1a7b7cdb1388fcd3aa/layout/painting/nsCSSRenderingGradients.cpp#419
[2] https://github.com/google/skia/blob/366fc2475261871d4c83bacd2bcfb0ab54276972/include/effects/SkGradientShader.h#L26
[3] https://msdn.microsoft.com/en-us/library/windows/desktop/hh404502(v=vs.85).aspx

Comment 16

[Bas Schouten (:bas.schouten)]

Attachment: Bug 1427063: Have D2D interpret colors in premultiplied space. As it says is its default.

Review commit: https://reviewboard.mozilla.org/r/238988/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/238988/

Comment 17

[Ryan Hunt [:rhunt]]

Comment on attachment 8970175 [details]
Bug 1427063: Have D2D interpret colors in premultiplied space. As it says is its default.

https://reviewboard.mozilla.org/r/238988/#review244602

LGTM

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/f212d89048ec
Have D2D interpret colors in premultiplied space. As it says is its default. r=rhunt

Comment 19

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/f212d89048ec

Comment 20

[5silentrain]

I think the bug is not completely fixed! :)
Chrome: http://jpegshare.net/aa/69/aa6919d1fabdd3c101dde9f015148c3d.png.html
Firefox: http://jpegshare.net/05/46/05467a4fd26ef773804aa14cd466c821.png.html

Screen Magnifier (1600%)
Chrome: http://jpegshare.net/08/aa/08aaaac91b09cef0f219d4b62df58b93.png.html
Firefox (you can see the gray lines that are arranged diagonally): http://jpegshare.net/29/f6/29f634563a62fd92f730d8c3ecc27baa.png.html