youtube-eng.blogspot.jp header background doesn't appear (because of vendor-prefixed gradients with no standard unprefixed fallback)

RESOLVED WORKSFORME

Status

Tech Evangelism
Desktop
RESOLVED WORKSFORME
3 years ago
6 months ago

People

(Reporter: sawrubh, Assigned: karlcow)

Tracking

(Blocks: 1 bug)

Trunk

Firefox Tracking Flags

(platform-rel -, firefox42 affected)

Details

(Whiteboard: [platform-rel-Youtube][sitewait], URL)

(Reporter)

Description

3 years ago
STR:

* Open http://youtube-eng.blogspot.jp/2015/01/youtube-now-defaults-to-html5_27.html in Nightly.

What happens:
The header background looks colorless/white while it appears red in Chrome.

Updated

3 years ago
Blocks: 1176496
Quoting their CSS (which is inline in that page's HTML):
==========
.header-outer {
background-image: -moz-linear-gradient(center top , #e62117, #cc181e);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e62117), color-stop(1, #cc181e));
background-image: -o-gradient(linear, left top, left bottom, color-stop(0, #e62117), color-stop(1, #cc181e));
}
==========

They need to include unprefixed gradient syntax, too. (And they can drop the -moz-linear-gradient syntax, since we've supported unprefixed gradients since Firefox 16 was released in 2012.)

From local testing, this seems to work:
  background-image: linear-gradient(#e62117, #cc181e);
Component: Untriaged → Desktop
Product: Firefox → Tech Evangelism
Summary: Background doesn't appear on blog → youtube-eng.blogspot.jp header background doesn't appear (because of vendor-prefixed gradients with no standard unprefixed fallback)
(Unsurprisingly, this bug is visible on the http://youtube-eng.blogspot.jp front-page and other blog posts, too -- not just the post from comment 0.)

Updated

2 years ago
platform-rel: --- → ?

Updated

2 years ago
Whiteboard: [platform-rel-Youtube]
Note, this works in Firefox with our support of -webkit-gradient, but it would be cool if Youtube would add unprefixed gradients at some point as well (so we can remove prefixed gradient support.... one day in the distant future).

Updated

2 years ago
platform-rel: ? → -
Karl, even though this works with our native webkit gradient support, it would be cool for Youtube to move to standard unprefixed gradients here. Can you bring this up to them? Thx.
Flags: needinfo?(kdubost)
Whiteboard: [platform-rel-Youtube] → [platform-rel-Youtube][contactready]
(Assignee)

Comment 5

a year ago
With the help of https://webcompat.com/tools/cssfixme

The right rule is 

```css
.header-outer{
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e62117), color-stop(1, #cc181e));
  background-image: -o-gradient(linear, left top, left bottom, color-stop(0, #e62117), color-stop(1, #cc181e));
  background-image: linear-gradient(to bottom, #e62117 0%, #cc181e 100%);
}
```

That said not sure the gradient achieves a lot, because the sub-text of the title is barely readable (contrast-wise.) " What's happening with engineering and developers at YouTube " is red on red.

It probably needs a 

```css
.header-desc {
	color: #FFFFFF;
}
```

Contacted.
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Flags: needinfo?(kdubost)
Whiteboard: [platform-rel-Youtube][contactready] → [platform-rel-Youtube][sitewait]
(Assignee)

Comment 6

6 months ago
This has not been fixed. But this is working because of the support of `-webkit-gradient`,
and also because we keep supporting `-moz-gradient` for webcompat reasons.
https://hacks.mozilla.org/2015/08/making-and-breaking-the-web-with-css-gradients/

Youtube has been contacted on September 5 2016.


I propose we close this as worksforme.
Status: ASSIGNED → RESOLVED
Last Resolved: 6 months ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.