在 Firefox 中可怕地变换图像“振动”。为啥？
Posted
技术标签:
【中文标题】在 Firefox 中可怕地变换图像“振动”。为啥？【英文标题】：Transforming image "vibrating" horribly in Firefox. Why?在 Firefox 中可怕地变换图像“振动”。为什么？ 【发布时间】：2016-04-10 00:47:05 【问题描述】：这与我之前提出的一个问题有关，但直到现在我才真正找到问题的根源。
我想要的是一个扩展为矩形的圆。它还可以从 0.9 扩展到 1。
我拥有的是这个http://codepen.io/StuffieStephie/full/zrZwEQ/ 我已经放慢了动画的速度，所以“振动”更清晰。
#seasonOne .test
padding:0;
background-color: #fff;
background: #fff url('http://i296.photobucket.com/albums/mm174/StuffieStephie/S1ChibiPreview2_zpsswyamase.png') 50% 50% no-repeat;
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
margin: 0 auto;
-webkit-transition: 2s;
-moz-transition: 2s;
transition: 2s;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
font-size: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
#seasonOne:hover .test
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
width: 250px;
height: 200px;
border-radius: 0;
为什么它会像这样晃动并且只在 Firefox 中？添加供应商前缀没有帮助...
【问题讨论】：
好的，首先AAAAAAAAAAAAAAAAAAAAAAAAA。这样一来，它似乎与 Firefox 如何处理重新调整边距有关，因为删除图像左右边距上的自动显着降低了振动。因为你有一个固定的宽度，你可以手动更正边距，而不是需要增长的右边距（即，使图像 div position:relative 并通过left:__px 将其居中。给我一点时间.. .
哦，供应商前缀也无济于事，如果你把它们放在它们是前缀的规则之上 - 前缀版本被标准版本覆盖，无论是浏览器内部还是内部如果浏览器知道标准版本是什么，则使用 CSS。
好吧，所以我的想法没有奏效。我可以告诉你这个问题肯定与宽度缩放有关。禁用 that 并且所有的口吃都消失了。我的 Chrome 副本也会卡顿，但程度不同——这让我认为 Firefox 的问题在于它实际上是在强制每一帧，而不是允许一些跳过。我会再玩 10 到 15 分钟，如果我发现了什么，请告诉你。很好的发现。
@abluejelly Eeey，感谢您对此进行调查！很遗憾，它是宽度缩放...从圆形预览到全宽是效果的全部吸引力 D：另外，我认为删除比例也有帮助，但即使使用它，它似乎仍然有点晃动关闭。
@abluejelly 如果无法解决，我会处理它。动画通常是 0.3 秒，当它那么快时它并不那么明显。但是神圣的鳄梨酱，她像一只年长的吉娃娃一样摇摇晃晃，速度较慢 D：这让我疯了一整天！单击阅读更多内容后，我仍然必须处理所有 AJAX 内容...诅咒我的强迫症：/
【参考方案1】：
首先，原因几乎是背景图像。所有浏览器在尝试在两个方向上同时设置大小和位置的动画时都会有点卡顿，只是 Firefox 丢帧的数量最少（射击？）。如果不知道这正是您正在制作动画的内容，就很难流畅地制作动画（因为像 GSAP 这样的 js 库和它们一样出色）。因此，您想要做的是 a) 一次只做一个或 b) 通过仅在图像本身上设置动画大小来“伪造”它，然后按下动画的其余部分放在图像周围的框架上。
因为图片居中，我们完全可以做B：
.season img
float: left;
max-width: 500px;
width: 100%;
animation-delay:0.1s;
.season p.oneP
animation-delay:0.5s;
.season p.twoP
animation-delay:0.75s;
.season p.threeP
animation-delay:1s;
.season h2
border-radius: 10px 10px 0 0;
background-color: #eee;
padding: 3px;
margin-top: 0;
overflow-x: hidden;
.season .smallText
animation-delay:0.2s;
overflow: hidden;
.season h6, .season .arts, .season h3
text-align: center !important;
animation-delay: 1.8s;
.next, .prev
float: right;
box-sizing: border-box;
width: 49%;
animation-delay: 3s;
border: 3px solid #EEE;
border-radius: 15px;
.prev
float: left;
.prev img.preview, .next img.preview
float: left;
.previews
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.card
color: #ff2772;
border-radius: 15px;
margin: 3px 1px;
background-color: #2d3034;
box-sizing: border-box;
width: 300px;
min-height: 400px;
display: inline-block;
transition: .25s;
cursor:pointer;
border: 1px solid #ff2772;
text-align: center;
.floatRight
float: right;
margin-right: 10px;
#page-content .card h6
padding: 10px 2px;
background: none;
border-radius: 10px 10px 0 0;
transition: .3s;
border-bottom: 1px solid #fff;
#page-content .card .smallText
transition: .3s;
background: none;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
#page-content .card:hover .smallText, #page-content .card:hover h6
background-color: #ff2772;
color: #2d3034;
.card:hover
background: #fff;
/*
.card img
width: 200px;
text-align: center;
border-radius: 100%;
background: #fff;
margin: 0 auto;
display: block;
transform: scale(.9);
transition: all .2s ease-in-out;
/*.card .test
transform: scale(.9);
width: 200px;
height: 200px;
overflow-x: hidden;
display: block;
margin: 0 auto;
*/
.imgwrapper
position:relative;
width:100%;
height:200px;
margin:0;
padding:0;
overflow:hidden;
#seasonOne .test
padding:0;
background-color:rgba(0,0,0,0);
width: 200px;
height: 200px;
border-radius: 50%;
border-style:solid;
border-color: #2d3034;
border-width:80px;
display: block;
transition:all 2s, border-color 0.25s;
transform: scale(.9);
font-size: 0;
position:absolute;
z-index: 1;
top:-80px;
left:-30px;
#seasonOne .img
background: #fff url('http://i296.photobucket.com/albums/mm174/StuffieStephie/S1ChibiPreview2_zpsswyamase.png') 50% 50% no-repeat;
/*Was gonna make that a dataURI, but that's 112KB. Heh.*/
width:250px;
height:200px;
transition: 2s;
transform: scale(.9);
position:absolute;
left:25px;
#seasonOne:hover .test
width: 250px;
height: 200px;
transform: scale(1);
border-radius: 0;
border-color:#fff;
left:-55px;
#seasonOne:hover .img
transform: scale(1);
.card:hover img
transform: scale(1);
border-radius: 0;
hr
margin: 0;
padding: 0;
img.preview
transform: scale(.9);
width: 200px;
display: inline;
float: none;
border-radius: 10px;
transition: all .2s ease-in-out;
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
border-radius: 10px;
line-height: 0;
font-size: 0;
.art img.preview:nth-child(1)
animation-delay: 2s;
.art img.preview:nth-child(2)
animation-delay: 2.25s;
.logo
clear:left;
padding-bottom: 10px;
img.preview:hover
transform: scale(1);
box-shadow: 0 15px 15px rgba(0,0,0,0.3);
border-radius: 0;
.season img.no-float
float: none;
@media screen and (max-width: 1200px)
.season h6
clear: both;
@media screen and (max-width: 800px)
.prev img.preview, .next img.preview
float: left;
.season p
clear: both;
.prev p, .next p
clear: none;
.season img
float: none;
margin: 0 auto;
text-align: center;
@media screen and (max-width: 750px)
.card
/*width: 49%;/*For this part to work, you'll have to do up more rules
*, otherwise you'll get an off-center image.*/
box-sizing: border-box;
@media screen and (max-width: 600px)
.prev, .next
width: 100%;
float: none;
margin: 5px auto;
.prev img.preview, .next img.preview
@media screen and (max-width: 399px)
.card
width: 100%;
<!doctype html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css">
<!-- Magnific Popup core CSS file -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://kamicon.net/assets/styles/mainStyles.css">
<link rel="stylesheet"
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="site-canvas">
<div id="page-content">
<section>
<h1>Help Me!</h1>
<p>The art shakes horribly when you hover over it in Firefox Why!?</p>
<div id="area" class="holder"></div>
<div class="previews">
<div id="seasonOne" class="card seasonOne">
<h6 class="center">Season 1 (2009) - The Pilot</h6>
<div class="imgwrapper">
<div class="img"></div>
<div class="test"></div>
<div class="wrapper2"></div>
</div>
<p class="animated smallText fadeInRight oneP">Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p>
<a href="#area" class="button">Read More</a>
</div>
</div>
<hr/>
</section>
</div>
<!-- #page-content -->
</div>
<!-- #site-canvas -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>或者codepen。
我将框架（.test Still）和图像（.img）分开，它们都包含在一个包装器（.imgwrapper）中。
包装器处理页面布局中的足迹。
框架的边框颜色现在特别地与卡片的背景一起动画，并且定位（和border-width'd）相当hackish....看看我是怎么做到的，你'会明白我的意思。呵呵。
图片现在有固定的宽度和位置，只有动画比例（因此，不再卡顿）。
我 90% 确定有更好的方法来做到这一点，但因为我必须对图像进行绝对定位（所以它的位置不会在框架发生时抽搐）我无法保留 image-div作为 frame-div 的子级。
另外，我很惊讶生成一个内角为圆角的正方形会很尴尬。我基本上只是做了一个很粗的圆圈，然后说“只显示它的这个正方形”。
编辑注意：@media 宽度低于750px 的调整大小导致偏离中心。禁用它“修复”它。把固定代码移到这里才注意到，呵呵。
【讨论】：
你是冠军！我真的很感谢你坚持下去。而且我承认我不是空 div 的粉丝（理想情况下，我会在其中有一个 img 标签，而不是通过 css 设置源，但是嗯）。这很hackish，但结果很好，而且看起来很可爱，这就是我想要的。非常感谢！ @StephanieQ 没有问题。我的自尊心受到打击，无法放下，直到我胜利出现哈哈。你会惊讶于这让我经常遇到奇怪的错误>.>以上是关于在 Firefox 中可怕地变换图像“振动”。为啥？的主要内容，如果未能解决你的问题，请参考以下文章
Firefox 变换比例图像错误。使用悬停变换过渡时，图像会闪烁自身的一个小版本