Clip-Path Does Not Work with Chrome

Clip-Path Inset in CSS not working in chrome

Turns out I just needed the -webkit- prefix (although I don't see it in this list of vendor prefixes)

.clip-me {           /* top, right, bottom, left */  -webkit-clip-path: inset(0px 50px 50px 0px);           clip-path: inset(0px 50px 50px 0px); }

<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">

Problems with CSS clip-path in Google Chrome

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.

clip-path does not work with chrome

Webkit does not support applying an SVG clipPath to an html image. If you make the image an SVG image i.e. change the tag to <image> and put it inside the <svg> element then it will work.

Firefox does support applying an SVG clipPath to an HTML image which is why it works there.

Here's an example courtesy of Pancho.

<svg width="245" height="180" viewBox="0 0 245 180" >
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="something.jpg" width="245" height="180" class="MyClipping" ></image>
</svg>

clip-path not working as expected in Chrome (works in Firefox and Safari)

I decided to play a little with Javascript. I've changed a little the HTML and the CSS. The subchilds are positioned top: 150px;.

 function getY(element) {
     var rect = element.getBoundingClientRect();
     return rect.bottom;
 }

let container1 = document.querySelector(".container_1");
let container2 = document.querySelector(".container_2");
let container3 = document.querySelector(".container_3");

let subchild1 = document.querySelector(".container_1 .subchild");
let subchild2 = document.querySelector(".container_2 .subchild");
let subchild3 = document.querySelector(".container_3 .subchild");

document.addEventListener('scroll', function() {
    let bottom1 = getY(container1);
    let bottom2 = getY(container2);
    let bottom3 = getY(container3);
    
    if ((bottom1 > 166) && (bottom2 > 166) && (bottom3 > 166)) {
        subchild1.style.display = "block";
    }
    else {
        subchild1.style.display = "none";
    }
    //
    if ((bottom1 < 166) && (bottom2 > 166) && (bottom3 > 166)) {
        subchild2.style.display = "block";
    }
    else {
        subchild2.style.display = "none";
    }   
    //
    if ((bottom1 < 166) && (bottom2 < 166) && (bottom3 > 166)) {
        subchild3.style.display = "block";
    }
    else {
        subchild3.style.display = "none";
    }

});

* {
    padding: 0;
    margin: 0;
    border: none;
}
html {
    background-color: black;
}
.info {
    list-style-type: none;
    margin-left: 13vw;
    padding: 0;
    overflow: hidden;
    position: fixed;
    color: white;
    z-index: -1;
    top: 80vh;
}
.container {
    width: 100%;
    height: 110vh;
}
.parent {
    position: absolute;
    width: 100%;
    height: 110vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    
}
.parent_1 {
    background-color: turquoise;
}
.parent_2 {
    background-color: tomato;
}
.parent_3 {
    background-color: purple;
}
.subchild {
    position: fixed;
    color: white;
    width: 60vw;
    left: 14vw; 
    top: 150px;
    
}
.container_1 .subchild {
    display: block;
}
.container_2 .subchild {
    display: none;
}
.container_3 .subchild {
    display: none;
}

<section class="container container_1">
        <Div class="parent parent_1">
            <Div class="child child_1">
                <p class="subchild">
                    First Title
                </p>
            </Div>
        </Div>
    </section>
    <section class="container container_2">
        <Div class="parent parent_2">
            <Div class="child child_2">
                <p class="subchild">
                    Second Title
                </p>
            </Div>
        </Div>
    </section>
    <section class="container container_3">
        <Div class="parent parent_3">
            <Div class="child child_3">
                <p class="subchild">
                    Third Title
                </p>
            </Div>
        </Div>
    </section>

webkit-clip-path not working for Chrome?

This seems to work

.svg-clipped {    clip-path: url(#svgRabbit);    -webkit-clip-path: url(#svgRabbit);    background:black;    width:200px;    height:500px;}

        <div class="svg-clipped"></div>        <svg height="0" width="0">            <defs>                <clipPath id="svgRabbit">                    <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="m 29.937786,284.5542 c -5.893949,-2.10071 -16.137808,-1.46109 -20.6689304,-4.19599 c -30.9424776,-93.41773 40.1491104,-99.87798 39.9169904,-130.49916 c -4.155883,-11.91356 -1.37483,-24.01298 3.09354,-30.76224 c -8.719524,-8.5724 -13.651389,-22.766307 -12.09846,-33.358522 c 1.543697,-12.047112 12.084392,-3.353633 12.65133,-4.22669 c -1.80717,-4.26947 -1.33755,-7.49019 1.282784,-8.79738 c 12.780242,-1.845839 15.499482,18.964276 17.971662,29.907252 c 17.187,4.59876 36.431048,12.02357 44.555168,30.48952 c 0.0513,5.79697 3.28251,6.00908 3.12021,11.4242 c -2.6378,15.76105 -27.345338,10.04675 -20.137208,27.02235 c 10.993518,24.31925 -13.81309,43.57354 2.027808,76.88013 c 1.127,2.07114 0.9668,3.65716 -1.30438,4.51239 c -7.861908,1.59894 -13.930178,-5.3055 -16.538058,-10.32425 c 1.42688,12.55744 -1.54424,25.85645 -6.00534,32.78576 c 26.569178,3.44452 30.242508,14.30155 5.231,14.20239 c -17.56971,-4.74981 -36.54354,-3.32533 -53.098116,-5.05976 z"/>                </clipPath>            </defs>        </svg>

Problem with CSS SVG Clip path - not working

As an easy workaround you might also use mask-image:

1. Copy the complete mask/blob svg (including the parent svg with viewBox attribute).
2. Convert the svg to a data-url (e.g. via Yoksel's URL-encoder for SVG
   )

Example 1: css mask-image (clip path inlined as data url)

svg {
  display: inline-block;
  width: 10em;
}

.picture {
  border: 1px solid #ccc;
  width: 500px;
  height: auto;
  aspect-ratio: 1/1;
  resize: horizontal;
  overflow: auto;
}

.imgMask {
  object-fit: cover;
  width: 100%;
  height: 100%;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 480 480' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' %3E%3Cpath fill='%23474bff' d='M465.5,291Q452,342,416,379Q380,416,335.5,439Q291,462,239.5,464Q188,466,144,440.5Q100,415,62.5,379Q25,343,13.5,291.5Q2,240,16,189.5Q30,139,61.5,97.5Q93,56,141,36Q189,16,239,20.5Q289,25,334,45.5Q379,66,412,103.5Q445,141,462,190.5Q479,240,465.5,291Z' /%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 480 480' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' %3E%3Cpath fill='%23474bff' d='M465.5,291Q452,342,416,379Q380,416,335.5,439Q291,462,239.5,464Q188,466,144,440.5Q100,415,62.5,379Q25,343,13.5,291.5Q2,240,16,189.5Q30,139,61.5,97.5Q93,56,141,36Q189,16,239,20.5Q289,25,334,45.5Q379,66,412,103.5Q445,141,462,190.5Q479,240,465.5,291Z' /%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

<div class="picture">
  <img class="imgMask" src="https://placekitten.com/g/300/300" alt="Sample Image" />
</div>

Inline css clip-path not respected on Chrome

To sum up the comments by @TemaniAfif in an answer so it stays:

If border-box is removed from clip-path, eg:

test.style.clipPath = 'polygon(..)';

then it works in Chrome too. However as per the latest spec on MDN, the following is valid combination and should be supported (support for Chrome on that page is green as grass):

/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);

The clip-path assumes a box model anyway, and it is imperative in certain cases that user sets the assumed box-model, for clipping, explicitly, so that is why combined values are supported. But it seems it is not so for Chrome (and Opera as far as I have tested).

So this is only a workaround untill full support of the feature is provided.

---

Related Topics