[Tracking Requested - why for this release]: Web compatibility regression Gmail tool button is transparent if applied Gmail' theme

This is the offending style: .T-I-ax7 { background-color: transparent; background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1); } It should be: .T-I-ax7 { background-color: #F3F3F3; background-image: linear-gradient(#F5F5F5, #F1F1F1); } - It should use the unprefixed gradient. - background-color should have the average color of the gradient in case the browser doesn't support gradient. (Why is it transparent?)

This is the style I'm seeing on gmail for the checkbox/refresh/More buttons (attached in a testcase): .xE .G-atb .T-I-ax7 { background-color:transparent; background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1); background-image:linear-gradient(top,#f5f5f5,#f1f1f1) }

(RE just-added "dev-doc-needed": the bug that caused this, bug 1176496, already has the "dev-doc-needed" keyword. I don't think we need additional gmail-specific documentation beyond what that bug requires, so I don't think we need that keyword here; but maybe I'm misunderstanding?)

Um, yeah, dev-doc-needed on bug 1176496 should be enough.

Additionally some routers' configuration page may be displayed incorrectly as this example image shows: http://4my.eu/draytek.png . The menu on the left doesn't have background. Live example for tests: http://eu.draytek.com:12760/

Thanks -- I filed bug 1183963 on that, so we can keep this bug focused on Gmail.

Tracking for 42 because Gmail is important to our users and should display correctly, also web compat regression.

Not tracking as it is not a bug of fx but a web compat issue.

Alice thanks for the report, * Can you reproduce? * Could you add a screenshot for this? * Which specific URI? * Which user agent string, which device and which browsers? Typically, if we want to explain to Google we need more details. Thanks :)

No longer reproduce. Gmail site had modified its own style.

they provide background-color: #f5f5f5; for those buttuns

(In reply to Alice0775 White from comment #11) > No longer reproduce. > Gmail site had modified its own style. Bad news -- it look like Google did not fix this after all (or perhaps they briefly did but then changed). It hasn't been reproducible in Firefox because we added back support for moz-prefixed gradients, but we tried to un-ship them again, and we hit this exact issue. :( Quoting bug 1366526 comment 0, we're seeing this CSS: >.TI .T-I-ax7, .z0 .T-I-ax7, .G-atb .T-I-ax7 { > background-color: transparent; > background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1); > background-image: linear-gradient(top,#f5f5f5,#f1f1f1); ...which looks basically the same as the faulty CSS that I posted in comment 3 here.

Rick Byers says on duplicate bug 1366526 comment #6: > Sorry for the GMail trouble here. I had already filed this bug with the > GMail team (b/37095388) since it reproduces in the latest Edge 15 builds as > well. They assume all the different prefixed gradients use the same syntax > as the -webkit one, yet only send the -webkit (which would actually work in > all modern browsers) to Chrome and Safari. I will continue to try to get > this fixed. Transferring my followup question from Rick on that bug over to this bug -- Rick, is it possible to come up with an ETA for the fix? (If it's not soon, we'll need to begrudgingly consider supporting moz-prefixed gradient syntax in Servo so that we don't regress GMail when we experiment with using Servo's CSS engine in Firefox. Hopefully this is a trivial-enough fix that someone on the GMail team can fix it though?)

Here's a screenshot of what this bug looks like, on the button bar at the top of GMail. The buttons are the same color as the page (white) when the intent is for them to have a gray gradient. For anyone wanting to test this: you can trigger this bug by visiting about:config and setting the pref "layout.css.prefixes.gradients" to "false". (This pref-tweak will disable support for -moz prefixed gradients -- though, note that webkit-prefixed gradients will still be supported.)

Dropping -webkit-gradient in Chrome would be another path. But not sure it's possible. That would break a lot of stuff, specifically in Japan and China.

There wasn't a bug filed previously on GMail for this, was there? The bug has been assigned and the GMail team says they can work on it "soon", but I don't have a date - sorry. I'll try to get more information.

It doesn't look like we reached out when this came up previously, no. Our bad. :-/ Thank you for the information! Good to know it's at least assigned & considered a "soon" fix. :)

(In reply to Daniel Holbert [:dholbert] (reduced availability - travel & post-PTO backlog) from comment #19) > It doesn't look like we reached out when this came up previously, no. Our > bad. :-/ See Comment #11 and Comment #12 I guess the background-color was removed at a point (which is usually considered as a good fallback). So that's a good lesson for us. Don't give up the fight even if the fallback is good. :)

Great news -- it looks like this is *basically* fixed! At least, I'm now seeing this CSS for the bar of buttons at the top: .xE .G-atb .T-I-ax7 { background-color:transparent; background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1); background-image:linear-gradient(top,#f5f5f5,#f1f1f1); background-image:-moz-linear-gradient(to bottom,#f5f5f5,#f1f1f1); background-image:linear-gradient(to bottom,#f5f5f5,#f1f1f1) } .xE .G-atb .T-I-ax7.T-I-JW,.xE .G-atb .T-I-ax7.J-JN-M-I-JW { background-color:transparent; background-image:-moz-linear-gradient(top,#f8f8f8,#f1f1f1); background-image:linear-gradient(top,#f8f8f8,#f1f1f1); background-image:-moz-linear-gradient(to bottom,#f8f8f8,#f1f1f1); background-image:linear-gradient(to bottom,#f8f8f8,#f1f1f1) } The last line -- "to bottom" -- is valid CSS, so these buttons get the correct styling even if I disable moz-prefixed gradient support (by setting about:config pref layout.css.prefixes.gradients to false). CAVEAT: there are other elements that are still kind-of broken, e.g. the "Reply" button at the top-right of individual messages, which has this styling: .T-I-ax7 { -moz-box-shadow:none; box-shadow:none; background-color:#f5f5f5; background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1); background-image:linear-gradient(top,#f5f5f5,#f1f1f1); color:#444; border:1px solid #dcdcdc; border:1px solid rgba(0,0,0,0.1) } This one doesn't have a modern "to bottom" gradient, so its gradients are all bogus if we disable moz-prefixed gradient support. :( HOWEVER, it's OK, because it has a fallback "background-color" property -- so it's still visible (and looks basically the same as the extremely-subtly-changing background-gradient). Rick: can you confirm that this is basically fixed on Google's end? (via the issue you filed, b/37095388 , per bug 1366526 comment 6) Thanks!

Yes, the GMail architecture made it hard to do the "right thing" (they rely on an auto-prefixer which is IMHO flawed), but they hacked around it in order to address the bug. Sorry I didn't follow up here once I saw it was launched.

We wonder if this can be closed, Daniel...

I think so. It's a bit tricky to test now, because our moz-prefixed-gradient-disabling pref seems to have broken (I filed bug 1451874 on that) -- so I had to test this in an old build (I used Nightly 2017-06-01) to allow myself to turn that pref off. I'm seeing the same basic behavior as Comment 21 -- the "reply" button at the top-right of each message is still using bogus unprefixed CSS -- "linear-gradient(top,#f5f5f5,#f1f1f1)" -- should be "to bottom", not "top". But it's basically fine because there's a fallback background-color and the gradient is pretty much all a single color anyway, so it's not noticeable. So I'm happy to call this closed -- there's nothing on gmail anymore that would block us from removing moz-prefixed gradients.