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?