Search code examples
cssgoogle-chromepathclipclip-path

Problems with CSS clip-path in Google Chrome

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>
Solution

  • 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.