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

Question

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-l         


        

Answer 1

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

like: I need show transparent text color + ' ' 

Answer 2

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;

Answer 3

It might sound weird but:

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

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

Answer 4

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

Answer 5

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.