javascript - 仅在带有动画的 Firefox 上进行文本模糊

Question

试图为我的观点获得一个干净的文本。此代码在 chrome/IE 上显示干净的文本，但在 Firefox 上不显示，由于某些原因，它显示了一个模糊的文本。

这是我的问题的重现：https ://jsfiddle.net/z7egrnod/

有没有人有解决方案来解决这个问题？我只是不明白怎么可能有一个模糊的文字。

.skewContent {
height: auto;
-o-transform: skewY(-6deg);
-moz-transform: skewY(-6deg);
-ms-transform: skewY(-6deg);
-webkit-transform: skewY(-6deg);
transform: skewY(-6deg);
transform-origin: top left;
overflow: visible;
}

.skewContent#toolbox {
    margin-top: -110px;
    outline: 1px solid transparent;
}

.containerSkew .skewFix {
-o-transform: skewY(6deg);
-moz-transform: skewY(6deg);
-ms-transform: skewY(6deg);
-webkit-transform: skewY(6deg);
transform: skewY(6deg);
}

chrome 上的图片示例：

Firefox 上的图片示例：