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

Question

尝试向我的页眉添加斜 Angular 边框，然后还在斜 Angular 边框周围添加框阴影。

似乎工作正常，但在 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;
}

http://codepen.io/velnias2015/pen/KaBzrq

在所有其他浏览器上看起来都很好，是否有针对 firefox 的修复程序？

Answer 1

添加 translateZ(1px) 以修复转换的抗锯齿问题。

变换:translateZ(1px) skewY(-1.5deg);

转换渲染问题很常见，修改 3d 转换属性通常是解决这些问题的最佳方法，因为它会导致浏览器使用不同的方法进行渲染。与此相同但似乎不适用于此处的其他常见修复是:backface-visibility: hidden 和 perspective: 1px。