CSS 剪辑路径在 Google Chrome 中的问题

Question

以下使用 CSS 剪辑路径属性的网站项目在 Safari 中工作正常但在 Google Chrome 中中断（它在 [=27] 中也工作正常=] Chrome 直到几个星期）。这是 Google Chrome 中关于 CSS 剪辑路径的错误吗？

https://css-clip-text.webflow.io

这是我用过的 CSS 代码：

<style>
.text-holder {
clip-path: inset(0px 0px 0px 0px);
-webkit-clip-path: inset(0px 0px 0px 0px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ */
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%; text-align: center; vertical-align: middle; padding-top: 50vh;} 
}
@supports (-ms-accelerator:true) {
   /* Edge 12+ */ 
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%;  text-align: center; vertical-align: middle; padding-top: 50vh;} 
}
@supports (-ms-ime-align:auto) {
    /* Edge 16+ */ 
.text-holder {clip: rect(0,auto,auto,0);}
.text {display: block; width: 100%;  text-align: center; vertical-align: middle; padding-top: 50vh;} 
}
</style>

Answer 1

如果您对每个 .h1 .text 应用 z-index，它似乎在 Chrome 中有效。请参阅下面的屏幕截图。

Answer 2

我对 Chrome 和“clip-path”也有类似的问题。对我来说，它有助于将 CSS 属性 transform: translateZ(0); 设置为具有“剪辑路径”的元素内的所有元素属性.

CSS 剪辑路径在 Google Chrome 中的问题

Problems with CSS clip-path in Google Chrome

css

google-chrome

path

clip

clip-path