Safari浏览器中mask-image属性无法生效的解决方法咨询

问题根源 #

1. Safari 15.5仍需依赖-webkit-前缀来支持mask相关CSS属性；
2. <tr>作为表格行元素，在Safari的渲染机制中无法直接应用mask效果，需调整元素渲染方式或更换样式应用对象。

方案一：给<tr>添加前缀并修改display属性 #

修改后的CSS代码：

.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));
  display: block; /* 将tr转为块级元素以支持mask */
}

注意：修改display:block可能影响表格原生布局，需根据实际场景调整适配。

方案二：将mask样式应用到<td>元素（更推荐，无布局风险） #

调整后的CSS与HTML代码：

.table-cell-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));
}

<table>
  <tr>
    <td class="table-cell-mask">Test</td>
  </tr>
</table>

该方式保留表格原生布局逻辑，兼容性更稳定。

内容的提问来源于stack exchange，提问作者mana