The following Website project using the CSS clip-path property works fine in Safari but breaks in Google Chrome (it also works fine in Google Chrome until a few weeks). Is this a bug in Google Chrome regarding CSS clip-path?
https://css-clip-text.webflow.io
Here is the CSS code I've used:
<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>
I had a similar issue with Chrome and "clip-path". For me it helped to set the CSS property transform: translateZ(0);
to all elements inside the element with the "clip-path" property.