谷歌浏览器中的CSS剪贴路径问题

xesrikrc  于 2022-12-30  发布在  其他
关注(0)|答案(3)|浏览(177)

以下网站项目使用CSS clip-path属性在Safari中运行良好,但在Google Chrome中中断(在几周前它在Google Chrome中也运行良好)。这是Google Chrome中有关CSS clip-path的bug吗?
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>
dgenwo3n

dgenwo3n1#

我在Chrome浏览器和“clip-path”上也遇到过类似的问题,对我来说,将CSS属性transform: translateZ(0);设置为“clip-path”元素内的所有元素很有帮助。

6jygbczu

6jygbczu2#

好吧,它的Stardate 100591.97和感谢 chrome 浏览器,我不得不给予尝试使用剪辑路径:inset();并使用剪辑路径:polygon();改为。

.text-holder {
   -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
   clip-path: polygon(0 0, 0 0, 0 0, 0 0);

}

https://www.stoacademy.com/tools/stardate.php

agxfikkp

agxfikkp3#

如果你对每个.h1 .text应用一个z轴索引,它似乎可以在Chrome中工作。

相关问题