Firefox中的CSS变换旋转像素问题答案

【问题标题】：CSS transform rotate pixel issue in firefoxFirefox中的CSS变换旋转像素问题
【发布时间】：2020-10-19 10:21:33
【问题描述】：

我正在尝试使用变换旋转属性创建摆动按钮，它在 Opera 和 chrome 浏览器中运行良好，但在 Firefox 中，它会在按钮的边框中产生奇怪的像素问题：

我的按钮和摆动关键帧的 css 代码

.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;
  -moz-animation: swing 5s infinite;
  transition: 0.2s;
  -moz-transition: 0.2s;
}

@-moz-keyframes swing {
  20%,
  60% {
    -moz-transform: rotate(5deg);
  }
  40%,
  80% {
    -moz-transform: rotate(-5deg);
  }

  100% {
    -moz-transform: rotate(0deg);
  }
}

@keyframes swing {
  20%,
  60% {
    transform: rotate(5deg);
  }
  40%,
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

&lt;div class="RedButton"&gt;Get Started Now!&lt;/div&gt;

我错过了什么吗？

【问题讨论】：

我已经尝试过你的代码，一切正常Photo - Firefox 77.0.1 - Win 10
可能有助于添加您正在运行的 Firefox 版本和您的操作系统 ;)
@SimoneRossaini 我使用的 FF 版本与您的完全相同，但抗锯齿看起来很糟糕（就像 OP 一样）：i.imgur.com/Gr8GDAf.mp4
@Terry 怎么可能：0？
@Temani Afif 的回答让它变得更好。

标签： css firefox css-transitions css-transforms

【解决方案1】：

添加一个小阴影使它看起来更好：

.RedButton {
  background-color: #bc0000;
  border-radius: 7px;
  border: 1px solid #bc0000;
  display: inline-block;
  cursor: pointer;
  color: #fff ;
  font-family: Arial;
  font-size: 30px;
  font-weight: bold;
  padding: 7px 24px;
  text-decoration: none;
  margin-top: 15px;
  animation: swing 5s infinite;
  box-shadow: 0 0 1px #bc0000;
}


@keyframes swing {
  20%,
  60% {
    transform: rotate(5deg);
  }
  40%,
  80% {
    transform: rotate(-5deg);
  }
}

&lt;div class="RedButton"&gt;Get Started Now!&lt;/div&gt;

【讨论】：

不是 100% 修复但让它变得更好，tnx 伙伴！
@domikp 你还可以再增加一点（2px）
是的，我知道，tnx 兄弟！

【解决方案2】：

backface-visibility 似乎根据这个 SO 线程完成工作：css transform, jagged edges in chrome

.RedButton {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
   // ...
}

如果这不起作用，请尝试：outline: 1px solid transparent;

【讨论】：

你试过了吗？您链接的问题也是关于 Chrome 而不是 Firefox
在线程中人们谈论在 Firefox @TemaniAfif 上有这个问题
@geauser ，不工作，但 box-shadow 让它变得更好。 tnx 为您解答。