csssvgfirefoxclip-path

Firefox clip-path + box-shadow bug


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

Second snippet on firefox

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.


Solution

  • Turns out, it's indeed a bug in firefox. Here is the bugzilla issue