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

Question

我正在 CSS 中尝试一个东西，其中文本的背景是图像，当我们将鼠标悬停在文本上时，它会缩放到非常大的数字，即用作字体颜色的图像显示的数字完全起来。它在 Mozilla Firefox 上运行完美，但 CSS 的转换属性似乎在 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

看起来 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>

Answer 2

问题是任何类型的转换都会创建新的堆叠上下文，因此剪辑文本无效。 [这是 CSS 属性比例尺为您做的事情之一 - 使它不再是一个转换 - 但 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>

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

CSS transform works on Firefox but not on Chrome

html

css

google-chrome

css-transforms