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变换旋转像素问题的主要内容,如果未能解决你的问题,请参考以下文章