CODEWITHSUNDEEP
cssgoogle-chromepathclipclip-path
Philipp Roth
Philipp Roth

Reputation: 63

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>

Upvotes: 1

Views: 3325

Answers (3)

Carol McKay
Carol McKay

Reputation: 2424

Well, it's Stardate 100591.97 and thanks to the chrome browser I had to give up trying to use clip-path: inset(); and use clip-path: polygon(); instead.

.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);

}

enter image description here

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

Upvotes: 1

R. v. Rickenbach
R. v. Rickenbach

Reputation: 64

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.

Upvotes: 2

Authentic Science
Authentic Science

Reputation: 848

It seems to work in Chrome if you apply a z-index to each .h1 .text. See screen shot below.

Screen shot from Chrome

Upvotes: 0

Related Questions