Problema con chrome: 1px che esce dal nulla.
Ciao a tutti. Ho un problema che non riesco a risolvere con Chrome:
ho un div #slider che ha un div #sliding dentro, che si muove con il css3. Il div #sliding contiene cinque div .slide che si posizionano con un "position: relative;".
Funziona tutto perfettamente, ma su Google Chrome (su Linux) tutto si sposta di un pixel, creando un odioso effetto trasparenza.
Come posso risolvere?
Questo è il mio css:
Codice:
@keyframes sliding
{
0% {top: 0px;left: 0px;}
17% {top: 0px;left: 0px;}
20% {top: -270px;left: 0px;}
37% {top: -270px;left: 0px;}
40% {top: -540px;left: 0px;}
57% {top: -540px;left: 0px;}
60% {top: -810px;left: 0px;}
77% {top: -810px;left: 0px;}
80% {top: -1080px;left: 0px;}
97% {top: -1080px;left: 0px;}
100% {top: 0px;left: 0px;}
}
#slides {
width: 960px;
height: 270px;
padding: 0;
margin: 0;
overflow: hidden;
}
#sliding {
position: relative;
height: 1350px;
width: 960px;
top: 0px;
left: 0px;
animation-name: sliding;
animation-duration: 30s;
animation-timing-function: ease-in-out;
animation-play-state: running;
animation-iteration-count: infinite;
}
#sliding:hover {
animation-play-state: paused;
}
#didascalia {
position: relative;
right: 0px;
top: 30px;
width: 200px;
}
#didascalia p {
background-color: #000;
color: #fff;
}
.slide, .slide img {
height: 270px;
width: 960px;
padding: 0;
margin: 0;
}
E questo è l'html:
Codice HTML:
<div id="slides">
<div id="sliding">
<div class=".slide">
<img src="http://mine.4fight.com/wp-content/uploads/2012/07/minecraft_desert_by_henrickgamars-d41skiz.png">
</div>
<div class=".slide">
<img src="http://mine.4fight.com/wp-content/uploads/2012/07/minecraft__small_village_by_cuberon-d480epq.png">
</div>
<div class=".slide">
<img src="http://i33.servimg.com/u/f33/17/63/47/34/noscra10.jpg">
</div>
<div class=".slide">
<img src="http://tatopoulos.sakura.ne.jp/tokusatsu/minecraft_120122_x7.jpg">
</div>
<div class=".slide">
<img src="http://lorempixel.com/960/270">
</div>
</div>
</div>
Succede solo su Chrome, come posso fare?
La pagina si trova all'indirizzo http://pianetaminecraft.it/
http://imageshack.us/a/img6/3886/ist...9201216301.png
