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:

@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:

<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/

Prova a dare allo #sliding margin e padding 0

Prova a dare allo #sliding margin e padding 0

Continua a farlo.

[acsocmel]

le classi nell'html non devono avere il punto iniziale ma una lettera
il punto si mette nel css per dire che quel ruleset si applica a una classe