Saurabh Anand [:sawrubh] Reporter
	Description • 9 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.

	Daniel Holbert [:dholbert]
	Comment 1 • 9 years ago

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);

	Daniel Holbert [:dholbert]
	Comment 2 • 9 years ago

(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.)

	Mike Taylor [:miketaylr]
	Comment 3 • 8 years ago

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).

	Mike Taylor [:miketaylr]
	Comment 4 • 8 years ago

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.

	Karl Dubost💡 :karlcow Assignee
	Comment 5 • 8 years 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.

	Karl Dubost💡 :karlcow Assignee
	Comment 6 • 7 years 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.