I'm using clip-path
property to make elements of irregular shapes like this:
#triangle {
background-color: indigo;
clip-path: url(#shape);
height: 200px;
width: 400px;
}
<div id="triangle"></div>
<svg width="0" height="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="shape">
<polygon points="0 0, 1 0, 1 1"></polygon>
</clipPath>
</defs>
</svg>
But it just so happened that one of the elements with such shape on the page had a box-shadow
applied to it as well:
#triangle {
background-color: indigo;
clip-path: url(#shape);
height: 200px;
width: 400px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
<div id="triangle"></div>
<svg width="0" height="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="shape">
<polygon points="0 0, 1 0, 1 1"></polygon>
</clipPath>
</defs>
</svg>
The shadow is obviously invisible, because clip-path
clips it. When I use this in MS Edge or Chrome everything is fine, there is a triangle with sharp angles and no visible shadow as it's supposed to be. On firefox the first snippet works the same way, just fine. But the second snippet renders a trapezoid instead of a triangle on firefox, like on the image. It disappears as soon as box-shadow
property is disabled. And box-shadow
isn't even of indigo
color like the triangle, it's transparent black
Is this a firefox bug, is there a way to avoid it? Of course I can remove box-shadow
since it's clipped anyway, but it's still interesting to see what causes this.
Turns out, it's indeed a bug in firefox. Here is the bugzilla issue