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

Posted

技术标签:

【中文标题】Firefox中的CSS变换旋转像素问题【英文标题】:CSS transform rotate pixel issue in firefox 【发布时间】: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);
  
<div class="RedButton">Get Started Now!</div>

我错过了什么吗?

【问题讨论】:

我已经尝试过你的代码,一切正常Photo - Firefox 77.0.1 - Win 10 可能有助于添加您正在运行的 Firefox 版本和您的操作系统 ;) @SimoneRossaini 我使用的 FF 版本与您的完全相同,但抗锯齿看起来很糟糕(就像 OP 一样):i.imgur.com/Gr8GDAf.mp4 @Terry 怎么可能:0? @Temani Afif 的回答让它变得更好。 【参考方案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);
  
<div class="RedButton">Get Started Now!</div>

【讨论】:

不是 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 为您解答。

以上是关于Firefox中的CSS变换旋转像素问题的主要内容,如果未能解决你的问题,请参考以下文章

CSS旋转变换使图像模糊

CSS“变换旋转”创建工件

SVG 变换原点 CSS 动画 – Firefox 错误

无限 CSS 旋转在 Firefox 中有效,但在 Chrome 中无效

CSS3 变换旋转导致 Chrome 偏移 1px

3D CSS 变换,Firefox 中的锯齿状边缘