Chrome 69在使用'transform'，'-webkit-background-clip:text'和'color:transparent'时不起作用 [英] Chrome 69 when using 'transform', '-webkit-background-clip: text' and 'color:transparent' don't work

问题描述

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>

但带有'transform'，

but with 'transform',

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

它不起作用. 结果是:

It will not work. the result is:

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

The version of chrome is 69. Can some one tell me why this does not work?

推荐答案

显然，对于-webkit-background-clip来说，嵌套嵌套的div并不是问题，但在Chrome 69中则无效.

Apparently nested divs were not a problem before for -webkit-background-clip but in Chrome 69 it doesn't work.

.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)的所有情况

The snippet above works fine for all the cases in Firefox (v62) and Chrome Canary(v71)

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

EDIT Safari (v11) has the same behaviour as chrome 69, just the first case on the snippet works

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

EDIT 2 If you are using the divs to achieve new lines, replacing the divs with <br/> is a possible workaround.

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

这篇关于Chrome 69在使用'transform'，'-webkit-background-clip:text'和'color:transparent'时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！