CODEWITHSUNDEEP
cssgoogle-chrome
Valay
Valay

Reputation: 1999

css - issue with webkit-text-fill-color in latest chrome

Please find this https://jsfiddle.net/91famhuv/8/

I am using webkit-text-fill-color and webkit-gradient to give progressive gradient effect to the description text. The actually code has a button "Show more" and by clicking on that button full description will be visible. Initially, only few lines will be visible with gradient effect.

Now, this was working properly before updating google chrome to latest version. After updating the chrome, the initial description text does not appear. I can select the text with mouse but it's not visible.

Even in fiddle, you can select the text next to "Description" with mouse which is not visible by default.

Is there an issue with latest google chrome or with webkit-text-fill-color ? And how to resolve this ?

Upvotes: 0

Views: 1768

Answers (3)

Moumita
Moumita

Reputation: 1

To resolve this issue use the below CSS property:

-webkit-print-color-adjust: exact;

Upvotes: -3

KingRidgehead
KingRidgehead

Reputation: 105

I also think there maybe a bug in the latest version of Chrome as the same rules you are using no longer work for me on buttons, but do on any other elements.

To resolve your issue though, you can change the rule:

    .description .info-cell {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#242424));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

To simply:

    .description-text {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#242424));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

Changing this in your own JSFiddle worked for me, so this is a workaround whilst this bug exists.

Upvotes: 0

Zane Anis
Zane Anis

Reputation: 77

Check out the MDN web docs : -webkit-text-fill-color

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

If you found any alternative, i'll take it.

Upvotes: 1

Related Questions