-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

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.