css - Transforming image "vibrating" horribly in Firefox. Why? -

this related question asked didn't find source of problem until now.

what want circle expands rectangle. scales .9 1.

what have http://codepen.io/stuffiestephie/full/zrzweq/ i've slowed down animation "vibration" clearer.

    #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; } 

why shaking , in firefox? adding vendor prefixes not help...

firstly, cause pretty background image. browsers stutter bit when they're trying animate both size , position in 2 directions, it's firefox dropping least amount of frames ^{(shots fired?)}. it's hard animate smoothly without knowing that's you're animating (reason js libraries gsap great are). thus, want either a) 1 @ time or b) "fake" animating size on image itself, , push rest of animation onto frame around image.

because image centered, can totally 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: .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 datauri, 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: .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 , (max-width: 1200px) {    .season h6 {      clear: both;    }  }  @media screen , (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 , (max-width: 750px) {	    .card {      /*width: 49%;/*for part work, you'll have more rules       *, otherwise you'll off-center image.*/      box-sizing: border-box;    }  }  @media screen , (max-width: 600px) {      .prev, .next{      width: 100%;      float: none;      margin: 5px auto;    }    .prev img.preview, .next img.preview {    }  }  @media screen , (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 hover on 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) - 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 @ 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>

alternatively on codepen.

i separated frame (.test still) , image (.img), contained both in wrapper (.imgwrapper).

the wrapper handles footprint in page layout.

the frame has border-color animated specially background of card, positioned (and border-width'd) hackishly.... take @ how did , you'll see mean. heh.

the picture has fixed width , position, animating scale (hence, no longer stuttering).

i'm 90% sure there's better way this, because had absolute-position image (so position wouldn't twitch while frame's did) couldn't keep image-div child of frame-div.

also, i'm surprised it's awkward generate square rounded inner corners. made thick circle , said "only show square of it".

edit note: resizing @media width below 750px caused offcenter. disabling "fixed" it. noticed when moved fixed code here, heh.