1183504 - Facebook friend name overlay in grid-of-friends has a black background instead of transparent gradient, now that -moz-linear-gradient is unsupported.

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Daniel Holbert [:dholbert]]

STR:
 1. View a friend's page on Facebook, in recent Firefox Nightly.
 2. Look at their friend list (grid of faces) on the left.

ACTUAL RESULTS:
The friend-name overlays have a black background.

EXPECTED RESULTS
Friend name overlays should have a transparent gradient background.


From looking at the stylesheet, this is happening because they use "-moz-linear-gradient" without the unprefixed standards-compliant version. (And we recently dropped support for "-moz-linear-gradient" in bug 1176496.)

Relevant CSS:
.fbTimelineFriendsBoxLarge .friendName{background:#000;background:-moz-linear-gradient(transparent, rgba(0, 0, 0, .7));

Stylesheet URL:
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yP/r/3AVHnuYIVzE.css

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot

Comment 2

[Daniel Holbert [:dholbert]]

(There are actually 6 instances of -moz-linear-gradient in that stylesheet:

background:-moz-linear-gradient(transparent, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .6) 100%);
background:-moz-linear-gradient(transparent, rgba(0, 0, 0, .7));
background-image:-moz-linear-gradient(rgba(0, 0, 0, .05), transparent);
background-image:-moz-linear-gradient(transparent, rgba(0, 0, 0, .05));
background-image:-moz-linear-gradient(0deg, transparent 0%, #fff 44%);
background-image:-moz-linear-gradient(0deg, transparent 0%, #e2e8f6 44%)

They all need unprefixed standard linear-gradient fallback to keep working in Firefox, in a post-bug 1176496 world.

In many (all?) cases here, I *think* it's a simple as just dropping the "-moz" prefix. (At least, that seems to work for the style in comment 0.) It's not always that simple though, as noted in e.g. bug 1182861 comment 4.

emk, do you know if we can just drop the "-moz" prefixes and be good here?

Comment 3

[Daniel Holbert [:dholbert]]

(I tagged some contacts at Facebook, via a Facebook post, BTW.)

Comment 4

[Masatoshi Kimura [:emk]]

(In reply to Daniel Holbert [:dholbert] from comment #2)
> emk, do you know if we can  just drop the "-moz" prefixes and be good here?

The former 4 instances are OK. The default direction is "top to bottom", prefixed or not.
-moz-linear-gradient(0deg, ...) should be changed to linear-gradient(90deg, ...).

Comment 6

[Paul O'Shannessy [:zpao] (not bugmail, email directly)]

Checking in from FB…

A couple questions before making what is hopefully just a 1 line fix:

1. When did unprefixed make it to stable? https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Cross-browser_gradients leads me to believe 16.

2. Not specific to the examples you see above (because there are actually a ton of them), but were there other differences between prefixed and non?

Generally speaking, any -moz-linear-gradient was most likely written as just linear-gradient and then transformed at build time. The transform is super simple though and just prepends "-moz-". We try to generate the minimal CSS so we strip the unprefixed one unless we need it (eg, old webkit where we actually generate 2 prefixed ones) and then we ship different stylesheets to different browsers. So the likely case is that anything requiring changes (eg 0deg -> 90deg) is actually just broken in Firefox (sorry). Luckily there aren't too many uses of the deg syntax.

Comment 7

[Daniel Holbert [:dholbert]]

Thanks for the responsiveness, zpao!

(In reply to Paul O'Shannessy [:zpao] (not reading much bugmail, email directly) from comment #6)
> 1. When did unprefixed make it to stable?
> https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Cross-browser_gradients leads me to believe 16.

Looks like bug 752187's target-milestone field agrees with you. emk can confirm.

> 2. Not specific to the examples you see above (because there are actually a
> ton of them), but were there other differences between prefixed and non?

(setting needinfo=emk to answer this. Hopefully bug 1176496's dev-doc-needed will produce some useful documentation on this, which we can just point to in later tech-evang bugs to help people convert their gradients.)

> So the likely case is that anything requiring changes
> (eg 0deg -> 90deg) is actually just broken in Firefox (sorry).

(I initially thought you were saying this is a bug in Firefox -- but on second-read, I think you're saying this will be broken *for Firefox users* for the time being.  That may not be a big issue, depending on how these gradients are used.  Though it's probably worth converting your deg-syntax gradients at some point (or adding some smarter logic to the per-browser-fixup scripts), given that "linear-gradient" is the actual standardized formulation. :))

Comment 8

[Masatoshi Kimura [:emk]]

[1] explains about some syntax changes. Microsoft(!) has a very nice article to explain the difference (read -ms as -moz).

[1] https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients
[2] http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx

Comment 9

[Paul O'Shannessy [:zpao] (not bugmail, email directly)]

This shipped yesterday so we're serving unprefixed to Firefox (>35 due to some configs). There are still a handful of cases that were manually prefixing but we'll handle those individually (most are in product code anyway).

Thanks again for letting us know! Definitely keep us in the loop for other such deprecations.

Comment 10

[Daniel Holbert [:dholbert]]

Thanks, zpao! I can confirm I'm seeing unprefixed linear-gradient syntax when I use DevTools to inspect the element described in comment 0 here. Hence, resolving as FIXED.

(Also, you may have noticed - we backed out the unsupporting of prefixed gradients for now, per bug 1176496 comment 11. So Nightly does support -moz-linear-gradient again; it's unclear when/how we'll re-unsupport them. Regardless, though, we don't want sites to be relying on them, so thank you for fixing this bug!)