以下网站项目使用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>
3条答案
按热度按时间dgenwo3n1#
我在Chrome浏览器和“clip-path”上也遇到过类似的问题,对我来说,将CSS属性
transform: translateZ(0);
设置为“clip-path”元素内的所有元素很有帮助。6jygbczu2#
好吧,它的Stardate 100591.97和感谢 chrome 浏览器,我不得不给予尝试使用剪辑路径:inset();并使用剪辑路径:polygon();改为。
}
https://www.stoacademy.com/tools/stardate.php
agxfikkp3#
如果你对每个
.h1 .text
应用一个z轴索引,它似乎可以在Chrome中工作。