Firefox浏览器应用CSS skewX变换导致盒元素垂直模糊问题求解

Firefox 对应用了 CSS 变换的元素默认采用亚像素渲染逻辑，skewX() 作为2D斜切变换，会让元素的边缘坐标落到物理像素的中间位置，触发抗锯齿计算，最终出现边框发虚、和下方元素衔接处有缝隙透出的问题。未添加变换的直角元素边界天然对齐整像素网格，因此不会出现这类渲染异常。

• 给应用skewX的伪元素同时添加translateZ(0)，强制触发GPU渲染，Firefox的GPU渲染管线会自动对齐像素边界，修改后的transform写法如下：

#tab:before {
    left: 0;
    transform: skewX(-20deg) translateZ(0);
    border-left: 2px solid #999999;
    border-top-left-radius: 6px;
}
#tab:after {
    right: 0;
    transform: skewX(20deg) translateZ(0);
    border-right: 2px solid #999999;
    border-top-right-radius: 6px;
}

• 如果添加translateZ(0)后还有轻微模糊，可以给伪元素额外添加image-rendering: crisp-edges属性，强制关闭亚像素抗锯齿，让边缘按整像素渲染。
• 如果还是存在下方content边框透出的问题，可以微调#tab的margin-bottom为-1px，或者把伪元素的height设置为calc(100% + 1px)，让倾斜后的标签底部完全覆盖住下方内容区的上边框。

内容的提问来源于stack exchange，提问作者Rick