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.
Comments
Post a Comment