firefox中rotate+overflow:hidden导致伪元素无法正常drop-shadow的问题

Question

项目中使用drop-shadow+translate+overflow:hidden的方法改变svg图标的颜色

.icon-refresh {
  width: 20px;
  height: 20px;
  overflow: hidden;
  //transform: rotate(90deg);
}

.icon-refresh::after {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background: transparent url("~@/assets/icons/autorenew-black-48dp.svg") no-repeat
    center/100%;
  filter: drop-shadow(0 20px red);
  transform: translateY(-20px);
}

以上代码能够正常生效，原图为黑色现在变成了红色。
但是在Firefox中，当加上rotate后，结果会变形甚至是消失，例如rotate(30deg)会变成
，rotate(45deg)会变成，rotate(85deg)会变成。
如果去掉overflow:hidden，又不会出现变形。
关闭浏览器所有附加组件仍然存在这个问题，应该可以排除插件的原因。
开发者工具中样式如下：


请问这是什么原因？

Answer 1

我试了一下，目前使用 perspective 属性去设置视距的话，是可以正常显示的。

.icon-refresh::after {
  /* ... */
  transform: perspective(500px) translateY(-20px); /* 增加了视距设置 */
}

---

至于原因是什么我也没能定位，视距无论设置为多少（perspective>=1px）都是生效的，那看起来可能是 Firefox 的渲染机制的问题？

不过从 Firefox 开发者工具的样式查看器中可以看到，相较于其他浏览器的渲染结果多了 ::marker 这个伪元素，这是个相对新的元素，也有可能是翻车的原因之一。

题主后面如果找到明确的原因了，记得回复我一下，还是挺感兴趣的。