使用'transform',' - webkit-background-clip:text'和'color:transparent'时,Chrome 69不起作用

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

显然，嵌套 div 以前不是问题，-webkit-background-clip但在 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 来实现新行，则将 div 替换为<br/>是一种可能的解决方法。

.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>