Css 使用带框阴影的倾斜的倾斜边框-FF问题

尝试在标题中添加有角度的边框，然后在有角度的边框周围添加框阴影

看起来效果不错，但在Firefox上，方框阴影周围有一些白色背景

代码如下

header {
  background: #41ade5;
  color: #fff;
  position: relative;
  z-index: 1;
  padding: 45px;
}
header:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-1.5deg);
  transform-origin: 100%;
  z-index: -1;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.5)
}
body {
  margin:0;
}

在所有其他浏览器上看起来都不错，firefox是否有修复程序？

添加translateZ（1px）以修复转换中的抗锯齿问题

transform:translateZ（1px）歪斜（-1.5度）

变换的渲染问题很常见，修改三维变换特性通常是修复这些问题的最佳方法，因为这会导致浏览器使用不同的方法进行渲染。其他与此相同但似乎不适用的常见修复方法有：
backface可见性：hidden
和
perspective:1px