Chrome 69在使用'transform'，'-webkit-background-clip：text'和'color：transparent'时不起作用

Question

CSS代码：

.test {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
  display: inline-block;
}

<span class="test">abcde</span>

但带有“转换”，

.test {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
  transform-origin: 0;
  transform: scale(1.2); /*any attributes*/
  display: inline-block;
}

<span class="test">abcde</span>

它不起作用。 结果是：

chrome的版本为69。有人可以告诉我为什么它不起作用吗？

Answer 1

显然，-webkit-background-clip以前嵌套的div并不是问题，但是在Chrome 69中它不起作用。

.test {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
  display: inline-block;
}

<span class="test">I'M VISIBLE</span>

<span class="test">
  <div>
     I'M NOT VISIBLE IN CHROME 69
  </div>
</span>

<span class="test">
     I'M ALSO NOT VISIBLE IN CHROME 69
  <div>
     I'M NOT VISIBLE IN CHROME 69
  </div>
</span>

上面的代码段适用于Firefox（v62）和Chrome Canary（v71）的所有情况

编辑 Safari（v11）的行为与Chrome 69相同，只是代码段中的第一种情况有效

编辑2 如果您正在使用div来换行，则可以使用<br/>替换div。

.test {
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
  display: inline-block;
}

<span class="test">I'M VISIBLE</span>

<span class="test">
  <br/>
     I'M NOW VISIBLE IN CHROME 69 & Safari (v11) 
</span>

<span class="test">
     I'M ALSO NOW VISIBLE IN CHROME 69 & Safari (v11) 
  <br/>
     I'M NOW VISIBLE IN CHROME 69 & Safari (v11) 
</span>