1248644 - bloomberg.com headlines display incorrectly (due to lack of -webkit-background-clip: text and -webkit-text-stroke)

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Mike Taylor [:miketaylr]]

Filing a new bug here because there's some other stuff going on here that would be useful to understand.

STR: visit http://www.bloomberg.com/news/features/2016-02-15/missing-malaysia-jet-mh370-weeks-away-from-keeping-secrets-forever

Expected: Headlines look the same as Chrome
Actual: Mostly just gradients, some with visible text, others not

Comment 1

[Mike Taylor [:miketaylr]]

(setting ni? to come back to this to diagnose)

Comment 2

[Mike Taylor [:miketaylr]]

Attachment: Pullquote in Firefox (left) vs Chrome (right)

Comment 3

[Mike Taylor [:miketaylr]]

(ugh, resetting ni?)

Comment 4

[Daniel Holbert [:dholbert]]

The piece shown in attachment 8719840 [details] is more of the same (-webkit-background-clip:text), except with "color:transparent".

Specifically: that pullquote has some non-transparent text like all the other headers, and then it *also* has some generated ::before and ::after content with "content: attr(data-feature-quote);", which provides the text-stacking effect that's shown in the chrome screenshot.

The ::before and ::after pseudo-elements are abspos, and they bring along their own "background-image" styling to apply the gradient.  AND, unlike the main headlines, they also have "color: transparent".

So, they stomp on top of the headline with their background-image, and then superimpose some transparent text on top of that. So we don't see the headline at all -- we just get the block of color from the abspos pseudo-elements' backgrounds.

Comment 5

[Daniel Holbert [:dholbert]]

The one thing that differentiates this from the other "-webkit-background-clip:text" bugs is the "block letter" effect.

That seems to be achieved with styling like this on the top (all-one-color) headline:
    -webkit-text-stroke: 0.09375rem #FA1E64;
    -webkit-text-fill-color: #fff;
    -webkit-background-clip: text;

The animated pullquote headline discussed in comment 4 looks similar, but has a transparent stroke instead, to pick up the gradient:
    -webkit-text-stroke: 0.1875rem transparent;

If we only implemented "-webkit-background-clip:text" and "-webkit-text-fill-color", we'd end up still breaking this website, but differently -- the outlines of the letters would be invisible (or barely-visible-just-due-to-antialiasing-shadows)

Comment 6

[Mike Taylor [:miketaylr]]

Good analysis, thanks Daniel. One thing I find interesting is the usage of -webkit-text-stroke for the main headline:

.feature-article .lede-headline {
    background-image: -webkit-linear-gradient(left, #FA1E64, #2B00F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-fill-color: #fff;
    -o-text-fill-color: #fff;
    -webkit-text-stroke: 0.09375rem #FA1E64;
    -o-text-stroke: 0.09375rem #FA1E64;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    color: #FA1E64;
    font-family: "NHaasGroteskDSPro-75Bd","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 6.25rem;
    line-height: 6.5rem;
    margin: 3.75rem auto 0;
    max-width: 67.5rem;
    padding-left: 0.125rem;
    -webkit-transition: opacity 0.8s ease;
    -moz-transition: opacity 0.8s ease;
    -o-transition: opacity 0.8s ease;
    transition: opacity 0.8s ease;
}

I'm not sure how important we think this is, but if we only support -webkit-background-clip and -webkit-text-fill-color, but not -webkit-text-stroke these headlines will not look the same (but it won't look *broken* IMO). Something to keep an eye out for.

Comment 7

[Mike Taylor [:miketaylr]]

(Ha, jinx I guess)

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (block letters using "-webkit-text-stroke")

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: Pullquote in Chrome, with -webkit-text-stroke styling cleared (showing what we'd look like with support for everything but that)

(In reply to Mike Taylor [:miketaylr] from comment #6)
> I'm not sure how important we think this is, but if we only support
> -webkit-background-clip and -webkit-text-fill-color, but not
> -webkit-text-stroke these headlines will not look the same (but it won't
> look *broken* IMO). Something to keep an eye out for.

[I think you wrote this before seeing comment 5]

I think it would look broken, if we don't implement -webkit-text-stroke -- the headline would mostly disappear.  You can see this in Chrome by clearing "-webkit-text-stroke" styles in devtools on my attached testcase, or on Bloomberg.

Here's a screenshot of Chrome rendering the same pullquote that you screenshotted before, but now with "-webkit-text-stroke" styles cleared.

Comment 10

[Mike Taylor [:miketaylr]]

> [I think you wrote this before seeing comment 5]

Yeah, I was wrong in assuming it would look OK. It seems pretty broken without -webkit-text-stroke support.

Comment 12

[u459114]

Attachment: block_letter.png

I think patches in bug 1269971 can fix the problem here. here is the rendering result after apply thsoe patches

Comment 13

[Daniel Holbert [:dholbert]]

As expected, I can confirm that this is FIXED in latest Nightly, via bug 1269971 (which was merged to central early this morning).

Hooray! Resolving as FIXED by bug 1269971 most recently (combined with bug 1248708 for -webkit-text-stroke).

Comment 14

[Daniel Holbert [:dholbert]]

(Also: dropping duplicate bug from list of dependencies, since we already depend on its duplicate-target.)

Comment 15

[Mike Taylor [:miketaylr]]

Yep, this looks awesome. \o/