1243654 - Pullquote on eater.com has a gradient background /w webkit css (due to lack of support for -webkit-background-clip: text)

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[Kevin Brosnan [Ex-Mozilla]]

* Load http://sf.eater.com/2016/1/19/10784686/the-perennials-san-francisco-opening
* Scroll to or use find to go to the pullquote "Imagine driving a new Tesla home from the lot,"

Actual: background gradient
Expected: element should be transparent

Toggling layout.css.prefixes.webkit and reloading the page fixes the issue

Comment 1

[Mike Taylor [:miketaylr]]

Thanks for the report Kevin -- this one is going to require support for -webkit-background-clip: text;

https://cdn0.vox-cdn.com/stylesheets/eater_styles_all.v1048757eae78c998.css

q.p-pullquote, .m-entry-body q, .m-feature-body q, q.pullquote, .p-pullquote, .m-entry-body q, .m-feature-body q {
    display: block;
    color: #e60000;
    background: -webkit-gradient(linear, left top, left bottom, from(#e60000), to(#ff5a00));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.5em;
    padding: 0;
    margin: 0 0 .1em 0;
    font-family: Georgia,serif;
    font-weight: normal;
}

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot

Comment 3

[Daniel Holbert [:dholbert]]

As noted in comment 2, this page just needs "-webkit-background-clip: text" support, which has now landed, in bug 759568. And indeed, I get EXPECTED RESULTS (nice gradient text-coloring, no gross background) on the section of the page shown in the screenshot.

--> Resolving as FIXED by bug 759568.