Unable to make mask-image to work on Safari browser-CodePudding

I have a table row that has the following CSS

.table-row-mask {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

<table><tr ><td>Test</td></tr></table>

It works fine on Chrome, but not Safari. Any idea how to make it work on Safari?

I'm on Mac with Safari 15.5

CodePudding user response：

I found that on Windows10 Edge I needed -webkit prefix to the mask, though not on Firefox on Windows.

The -webit was not needed on the current (verion 16...) IOS Safari but seems to be needed on earlier verion of IOS (15.3 and before).

So, safest to have both version in at least for now.

[UPDATE, the original contained a div in the HTML and edited version a table so both shown here].

.table-row-mask {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

<div >Test</div>

<table><tr ><td>Test</td></tr></table>