Firefox中的粒状按钮变换
Posted
技术标签:
【中文标题】Firefox中的粒状按钮变换【英文标题】:Grainy button transform in firefox 【发布时间】:2016-01-06 11:57:38 【问题描述】:我正在尝试转换 button
,但它在 Firefox 中确实是颗粒状的(在转换期间)。
谁能看一下,代码在下面……这里附上js小提琴链接https://jsfiddle.net/L3f9cy7g/1/
正如我所说。这个问题只在firefox
,我认为它与抗锯齿有关。我们尝试将其切换为 3d 变换,并调整 z-index
以防止 Firefox 浏览器干扰动画。到目前为止没有运气。
<div class="closePop">
<p></p>
</div>
bodybackground:black;
.closePop
right: -5px;
top: -5px;
height: 28px;
background-color: #f68d1e;
color: white;
border-radius: 50%;
width: 29px;
text-align: center;
border-style: solid;
border-width: 2px;
vertical-align: middle;
cursor: pointer;
transform: rotate(0deg);
transition: all .3s ease-out;
.closePop p
margin: 0;
margin-top: 4px;
.closePop:hover p:after
content:':(';
transition:contentArea 3s ease-out rotate .3s ease-out;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: translateZ(1px) rotate(0deg);
.closePop p:after
content: 'X';
transition: all .3s ease-out;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: translateZ(1px) rotate(90deg);
.closePop:hover
border-radius: 0;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: translateZ(1px) rotate(90deg);
.closePop p
transition: contentArea .3s ease-out rotate .3s ease-out;
【问题讨论】:
【参考方案1】:尝试添加一个透明的轮廓属性,
outline: 1px solid transparent;
【讨论】:
帮助确定边界。动画结束时仍有一个动作,但您确实回答了所要求的内容。 将您的修复添加到小提琴中以向您展示。 是的,如果您在 chrome 和 firefox 中并排查看动画并使用修复程序,您仍然可以看到“X”移动方式的微小差异。 我可以处理...那种我无法处理的颗粒状动画。哈以上是关于Firefox中的粒状按钮变换的主要内容,如果未能解决你的问题,请参考以下文章
在 180º firefox 和 opera 中旋转 svg matrix3d 变换 是