Chrome 69 when using 'transform', '-webkit-background-clip: text' and 'color:transparent' don't work

问题

CSS code :

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

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:

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

回答1:

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>

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

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

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>

来源：https://stackoverflow.com/questions/51924130/chrome-69-when-using-transform-webkit-background-clip-text-and-colortra

标签

css

google-chrome

background-image

transform