css - 背景剪辑：文本不适用于转换后的子元素

Question

我正在尝试使用background-clip: text，同时也在具有背景的元素内转换了子元素，但是一旦我添加transform（或者position: relative- 我也确定更多的东西）到孩子们background-clip: text就可以开始工作了。

为什么会这样？有没有办法绕过它？

document.querySelector('h1').addEventListener('click', function (e) {
  this.classList.toggle('alt');
});

h1 {
  background: red;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1.alt span {
  display: inline-block;
  transform: translateY(1rem);
}

<h1>
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</h1>

<p>Click the heading to change the spans from no transform to transform.</p>

标签： css