Firefox Clip-Path + Box-Shadow Bug ⇐ CSS

[Anonymous]

Я использую свойство clip-path < /code> для изготовления элементов нерегулярных фигур, таких как: < /p>

Код: Выделить всё

#triangle {
background-color: indigo;
clip-path: url(#shape);
height: 200px;
width: 400px;
}< /code>

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);
}< /code>

тень, очевидно, невидима, потому что Clip-path зажигает его. Когда я использую это в MS Edge или Chrome, все в порядке, есть треугольник с острыми углами и не видимой тенью, как это должно быть. На Firefox первый фрагмент работает так же, просто отлично. Но второй фрагмент делает трапецию вместо треугольника на Firefox, как на изображении. Он исчезает, как только свойство Box-Shadow отключено. 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? Конечно, я могу удалить коробку-подпреды , так как он все равно обрезан, но все еще интересно посмотреть, что вызывает это.

Подробнее здесь: https://stackoverflow.com/questions/655 ... shadow-bug