CSS 转换适用于 Firefox，但不适用于 Chrome

Question

我正在 CSS 中尝试一个东西，其中文本的背景是图像，当我们将鼠标悬停在文本上时，它会缩放到一个非常大的数字，用作字体颜色的图像完全显示出来。它在 Mozilla Firefox 上完美运行，但 CSS 的 transform 属性在 Chrome 上似乎被破坏了，文本在 Chrome 上悬停时消失了。

/* font */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap');

/* reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
}

body,
html {
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  background: #999;
}


/* styling */

.container {
  background: url("https://picsum.photos/900/800");
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container .image-text {
  font-size: 5em;
  font-weight: normal;
  text-align: center;
  transition: transform 2s linear;
}

.container .image-text:hover {
  transform: scale(200);
}

<div class="container">
  <div class="image-text">
    Hover
  </div>
</div>

Answer 1

问题是任何类型的转换都会创建一个新的堆叠上下文，因此剪辑文本无效。 [这是 CSS 属性 scale 为您所做的事情之一 - 将其从转换中移除 - 但 Chrome/Edge 不支持它]。

如果我们取消比例变换，而是增加字体大小和过渡，你会得到我认为你想要的效果：

/* font */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap');

/* reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
}

body,
html {
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  background: #999;
}


/* styling */

.container {
  background: url("https://picsum.photos/900/800");
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container .image-text {
  font-size: 5em;
  font-weight: normal;
  text-align: center;
  transition: font-size 2s linear;
}

.container .image-text:hover {
  font-size: 200em;
}

<div class="container">
  <div class="image-text">
    Hover
  </div>
</div>

Answer 2

Chrome 似乎无法正确呈现它。确实如此，当您使用zoom 时，您只会失去过渡...

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap');


.container {
  font-family: 'Rubik', sans-serif;
  background: url("https://picsum.photos/900/800");
  background-repeat: no-repeat;
  background-size: cover;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container .image-text {
  font-size: 5em;
  font-weight: normal;
  text-align: center;
  transition: transform 2s linear;
}

.container .image-text:hover {
  -moz-transform: scale(200);
  zoom: 200;
}

<div class="container">
  <div class="image-text">
    Hover
  </div>
</div>