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

VERIFIED FIXED

Status

()

VERIFIED FIXED
3 years ago
2 years ago

People

(Reporter: miketaylr, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(4 attachments)

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
(setting ni? to come back to this to diagnose)
Flags: needinfo?(miket)
Created attachment 8719840 [details]
Pullquote in Firefox (left) vs Chrome (right)
Flags: needinfo?(miket)
(ugh, resetting ni?)
Flags: needinfo?(miket)
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.
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)
Summary: bloomberg.com headlines display incorrectly (due to lack of -webkit-background-clip: text) → bloomberg.com headlines display incorrectly (due to lack of -webkit-background-clip: text and -webkit-text-stroke)
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.
(Ha, jinx I guess)
Flags: needinfo?(miket)
Created attachment 8719911 [details]
testcase 1 (block letters using "-webkit-text-stroke")
No longer blocks: 759568
Depends on: 759568
Attachment #8719840 - Attachment description: Firefox (left) vs Chrome (right) → Pullquote in Firefox (left) vs Chrome (right)
Created attachment 8719912 [details]
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.
> [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.
Duplicate of this bug: 1266407

Comment 12

2 years ago
Created attachment 8748834 [details]
block_letter.png

I think patches in bug 1269971 can fix the problem here. here is the rendering result after apply thsoe patches
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).
Status: NEW → RESOLVED
Last Resolved: 2 years ago
No longer depends on: 1267128
Resolution: --- → FIXED
(Also: dropping duplicate bug from list of dependencies, since we already depend on its duplicate-target.)
Yep, this looks awesome. \o/
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.