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

李舜生
  • 1
新手上路,请多包涵

项目中使用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);
}

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

回复
阅读 422
1 个回答

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

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

chrome-firefox


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

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

firefox-marker

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏