firefox bug in background-size, with hover and opacity -
i think found strange bug in firefox.
when have hover class on div background-size property (with change in opacity) size of of image use in background, changes 1 pixel in horizontal, or in vertical.
i made example of probleme here: http://jsfiddle.net/xz4f8/
the html:
<div class="group cont_tutto"> <div class="conteiner_articoli_cinema"> <div class="back_navigazione_articoli-mag"> <div class="articolo_mag"> <div class="tipo-articoli-mag">speciale cinema</div> <a href="http://www.google.it"> <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/now-you-see-me--i-maghi-del-crimine_articolo.jpg')"></div> </a> <div class="mag_titolo"> <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="stealth bastard deluxe">the lone ranger </a></h2> </div> </div> <div class="articolo_mag"> <div class="tipo-articoli-mag">speciale cinema</div> <a href="http://www.google.it"> <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/theloneranger384470.jpg')"></div> </a> <div class="mag_titolo"> <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="stealth bastard deluxe">the lone ranger </a></h2> </div> </div> <div class="articolo_mag"> <div class="tipo-articoli-mag">rcensione fumetti</div> <a href="http://www.google.it"> <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/16072013/nodo-alla-gola_articolo.jpg')"></div> </a> <div class="mag_titolo"> <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="stealth bastard deluxe">the lone ranger </a></h2> </div></div> <div class="articolo_mag"> <div class="tipo-articoli-mag">recensione cinema</div> <a href="http://www.google.it"> <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/15072013/distribuzione-cinema-e-dvd_articolo.jpg')"></div> </a> <div class="mag_titolo"> <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="stealth bastard deluxe">the lone ranger </a></h2> </div> </div> <div class="articolo_mag"> <div class="tipo-articoli-mag">recensione serie tv</div> <a href="http://www.google.it"> <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/08072013/trueblood-stagione6309717.jpg')"></div> </a> <div class="mag_titolo"> <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="stealth bastard deluxe">the lone ranger </a></h2> </div> </div> <div class="articolo_mag"> <div class="tipo-articoli-mag">recensione blu-ray</div> <a href="http://www.google.it"> <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/13072013/ax967523.jpeg')"></div> </a> <div class="mag_titolo"> <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="stealth bastard deluxe">the lone ranger </a></h2> </div> </div> <div class="articolo_mag"> <div class="tipo-articoli-mag">recensione cinema</div> <a href="http://www.google.it"> <div class="articolo_mag_cover" style="background-image:url('http://pu2.everyeye.it/public/immagini/12072013/lareligiosa825433.jpg')"></div> </a> <div class="mag_titolo"> <h2><a href="/pc/articoli/stealth-bastard-deluxe_recensione_18438" title="stealth bastard deluxe">the lone ranger </a></h2> </div> </div> </div> </div> </div> the css:
@charset "utf-8"; /* css document */ .articolo_mag { background-color: #efefef; float: left; width: 129px; margin-right: 6px; } .articolo_mag_cover { width: 129px; height: 177px; background-size:129px 177px; background-color: #333; } .articolo_mag_cover:hover { background-size:129px 177px; opacity: 0.9;} .mag_titolo {} .mag_titolo h2 {display: table-cell; vertical-align: middle; background-color: #fff; font-size: 10px; font-family: lato, arial; font-weight: bold; border: 1px solid #d9d9d9; text-align: center; text-transform: uppercase; padding-top: 0px; padding-bottom: 0px; height: 30px;} .mag_titolo h2:hover { color: #09f; background-color: #e4e4e4;} .mag_titolo h2 { display: block; color: #000000; text-decoration: none; text-transform: uppercase; width: 119px; line-height: normal; padding-right: 4px; padding-left: 4px; padding-bottom: 0px; } .tipo-articoli-mag { background-color: rgba(0,0,0,0.75); height: 17px; width: 115px; color: #fff; font-family: lato, arial; font-size: 10px; font-weight: bold; padding-top: 3px; padding-left: 5px; text-transform: uppercase; left: 5px; z-index: 25; position: relative; float: left; margin-top: 150px; } if use cover option background-size,the size problems seems attenuated, but, of images start flicker during update of page, or hover state (seems me, firefox can't decide witch right size of image )
it seems problem triggered div container use center content in page (cont_tutto) witch has 951px in width..
no problem @ on other browsers!
you had add "-moz-backface-visibility: hidden" solve problem. here solution: http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/
Comments
Post a Comment