Firefox中CSS transform rotate导致按钮边框像素异常问题排查

这个问题我之前也碰到过，Firefox在处理transform: rotate动画时，对细边框的抗锯齿渲染逻辑和Chrome/Opera存在差异，容易出现这种奇怪的像素错位情况。你可以试试以下几个方案来修复：

方案1：添加渲染优化属性 #

给.RedButton添加几个能触发浏览器硬件加速和优化渲染的属性，强制浏览器以更平滑的方式处理旋转元素：

.RedButton {
    background-color: #bc0000;
    border-radius: 7px;
    border: 1px solid #bc0000;
    display: inline-block;
    cursor: pointer;
    color: #fff !important;
    font-family: Arial;
    font-size: 30px;
    font-weight: bold;
    padding: 7px 24px;
    text-decoration: none;
    margin-top: 15px;
    animation: swing 5s infinite;
    transition: 0.2s;
    /* 添加以下优化属性 */
    backface-visibility: hidden;
    transform-style: preserve-3d;
    outline: 1px solid transparent;
}

/* 现在不需要-moz前缀了，现代Firefox支持标准语法 */
@keyframes swing {
    20%, 60% { transform: rotate(5deg); }
    40%, 80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

各属性作用： #

• backface-visibility: hidden：强制浏览器为元素创建独立的渲染层，利用硬件加速优化旋转动画的渲染，减少像素偏移。
• transform-style: preserve-3d：配合backface-visibility进一步强化3D渲染上下文，提升动画流畅度。
• outline: 1px solid transparent：通过添加透明轮廓，修正Firefox对边框渲染的计算逻辑，避免旋转时边框出现锯齿或错位。

方案2：用box-shadow模拟边框 #

如果方案1还没完全解决问题，可以尝试用box-shadow代替border，因为阴影的渲染机制在旋转时更稳定：

.RedButton {
    background-color: #bc0000;
    border-radius: 7px;
    /* 替换border为box-shadow */
    box-shadow: 0 0 0 1px #bc0000;
    border: none; /* 移除原边框 */
    display: inline-block;
    cursor: pointer;
    color: #fff !important;
    font-family: Arial;
    font-size: 30px;
    font-weight: bold;
    padding: 7px 24px;
    text-decoration: none;
    margin-top: 15px;
    animation: swing 5s infinite;
    transition: 0.2s;
    backface-visibility: hidden;
}

额外提示：移除过时前缀 #

你代码里的-moz-animation和@-moz-keyframes现在已经不需要了，Firefox 16+就支持标准的animation和@keyframes语法，删掉这些前缀可以简化代码，避免冗余。

测试一下修改后的代码，应该就能解决Firefox中的边框像素异常问题了。

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