IOS 兼容 background-clip 问题

利用CSS做文本颜色渐变？

background-image: linear-gradient(skyblue, hotpink);
color: transparent;
background-clip: text;

• 测试环境：windows10。chrome87
  没发现什么问题。

• 测试环境：RedmiK30Pro（安卓10）。Edge、夸克
  没发现什么问题。

直到。。

• 测试环境：IPhone 8plus、IPhoneX、IPhoneSE（IOS13）。Safari
  文本直接隐形了。。
  找了全网。。还是没解决。
  我开始以为兼容问题。于是加了-webkit-前缀。还是不行

.colorful {
  background-image: -webkit-linear-gradient(skyblue, hotpink);
 -webkit-background-clip: text;
  color: transparent;
 -webkit-text-fill-color: transparent;
}

我要渐变的文本是在一个button里的

<button class="colorful">文字渐变</button>

解决方法：

把<button>换成<div>