CODEWITHSUNDEEP
cssgoogle-chromeclip-path
Nikos M.
Nikos M.

Reputation: 8345

Inline css clip-path not respected on Chrome

I am making some animation and graphics libraries to work with html. For some things clipping is needed and since the elements are generated dynamically, clip-path (mostly polygon) is added dynamicaly in elements'a style property :

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

Firefox (76) works just fine, however Chrome (83) (and Opera as well) dont respect the clip-path property (on chrome element inspect it is not even shown on element's style properties as present)

It was supposed to be a bug in Chrome prior to v.64 but wherever I looked it says latest chrome (and webkit browsers in general) have full support for clip-path and polygon in particular.

Note: It is not an issue to test with url of svg path to be used a clip mask, but I would like to avoid svg, I would like to keep it pure html/css (however if i rememeber correctly not even svg inline url works with chrome when I was pulling my hair trying to figure out why it doesnt work as expected).

I have also tried adding with browser prefix (ie el.style.WebkitClipPath = 'polygon(..)') but nothing changed.

Test example should display a triangle (doesnt work on Chrome, at least my latest Chrome 83.0.4103.61 64bit windows):

var test = document.getElementById('test');
test.style.clipPath = 'border-box polygon(0px 0px, 200px 100px, 0px 200px)';
#test{
  position:relative;
  width: 200px;
  height:200px;
  background: #ff0000;
  padding: 0;
  margin: 0;
  border: 2px solid #00ff00;
  box-sizing: border-box;
  overflow: hidden;
}
<div id="test"></div>

What am I missing? Does chrome support clip-path with polygon, or not?

Upvotes: 2

Views: 1487

Answers (1)

Nikos M.
Nikos M.

Reputation: 8345

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.

Upvotes: 1

Related Questions