CODEWITHSUNDEEP
cssgoogle-chromesafariwebkit
Peter N
Peter N

Reputation: 131

-webkit-text-fill-color: transparent; not working in Safari 7.1.7

I have an ul with several li.

I use this id on the ul.

#list {
margin-right: auto;
margin-left: auto;
width:500px;
color:black;
background: -webkit-linear-gradient(#000, #909090);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

The contents of the ul receive a gradient treatment just fine in Chrome but not Safari. In Safari, all of the li are "invisible". If I inspect and then disable the "-webkit-text-fill-color: transparent;", the text will become visible albeit without the gradient (obviously).

Thoughts?

Here is the JSfiddle: https://jsfiddle.net/s96bzcua/

Kind regards,

Upvotes: 11

Views: 15764

Answers (5)

Masserra
Masserra

Reputation: 304

To someone coming to this, just drop -webkit-text-fill-color: transparent; as it's not a standard and is not on a standard track.

Use instead color: transparent and wrap everything in an @supports to prevent color transparent from being used in case background-clip: text is not supported.

Here's an example: https://jsfiddle.net/0oeftdbk/5/

––

As per the 🐛 bug of the gradient not showing clipped inside the text on Safari, it looks like that if it's applied on the parent element and not directly to the children, all the children need to be display: inline or a inherently inline element such as span.

Upvotes: 5

翁沈顺
翁沈顺

Reputation: 19

if you only have the ascii code on your Element, maybe you need a full-width character.

like: I need show transparent text color + ' ' 

Upvotes: -1

Catarino
Catarino

Reputation: 233

It might sound weird but:

replace transparent with rgba (0,0,0,0.0001)

It doesn't work with rgba (0,0,0,0)

Upvotes: 0

Parks
Parks

Reputation: 648

I had this same issue. Turns out it was due to the display property. For whatever reason, Safari needs the display set to "inline" or "inline-block", but not "inline-flex".

So for me this meant changing From: display: flex; To: display: inline;

Upvotes: 15

Marius K.
Marius K.

Reputation: 61

You can use an overlay with a gradient background, disable the interaction with the overlay and position it at the bottom of the list.

Take a look at this fiddle: https://jsfiddle.net/s96bzcua/1/

#overlay {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 99%, rgba(255, 255, 255, 1) 100%);
    width: 100%;
    pointer-events: none;
    height: 50%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 99;
}

Use

pointer-events: none;

to disable all interaction with the overlay and wrap everything in a div with relative positioning so you can place the overlay at the bottom of the list.

Upvotes: 0

Related Questions