Chrome, HTML 5, CSS transition+transform

[Worrelix]

Ich habe 8 <div> Container auf meiner Seite, die ich mittels position: fixed platziere.
3 dieser Container haben per CSS 3 :hover Animationen bekommen.

Nur in Chrome (oder allen Webkit-Browsern?) passiert Folgendes:
Wenn ich über das rechts unten gehe, zucken die beiden Pfeile rechts und links zu Anfang und Ende der Animation. Habe ich was falsch gemacht, oder ist das schlicht ein Bug?

Hier mal die relevanten inhalte der beiden CSS Dateien:

Spoiler

Show

Code: Alles auswählen

#wwwTitle { /* titel links oben */
   z-Index:2;
   position:fixed; left:0px; top: 10px; width:350px;height:90px;
   background-image:url(../img/wwwLogo.png); background-repeat:no-repeat;
   cursor:pointer;

   transition:top 2s, left 2s, transform 2s;
   -moz-transition:top 2s, left 2s, -moz-transform 2s; /* Firefox 4 */
   -webkit-transition:top 2s, left 2s, -webkit-transform 2s; /* Safari and Chrome */
   -o-transition:top 2s, left 2s, -o-transform 2s; /* Opera */

   transform:rotate(-10deg);
   -ms-transform:rotate(-10deg); /* IE 9 */
   -moz-transform:rotate(-10deg); /* Firefox */
   -webkit-transform:rotate(-10deg); /* Safari and Chrome */
   -o-transform:rotate(-10deg); /* Opera */
}
#wwwTitle:hover {
   left:100px; top: 50px;

   transform:scale(1.3);
   -ms-transform:scale(1.3); /* IE 9 */
   -moz-transform:scale(1.3);/* Firefox */
   -webkit-transform:scale(1.3); /* Safari and Chrome */
   -o-transform:scale(1.3);  /* Opera */

}

#arrRight {
   position:fixed; right:1%; top:115px; bottom:100px; width:8%; height:auto;
   background-image:url(../img/arrRight.png); background-position:center 40%;
   background-repeat:no-repeat;
   cursor:pointer;
}
#arrRight:hover {
   background-color:#7777dd;
}

#arrLeft  {
   position:fixed; left:1%;top:115px; bottom:100px; width:8%; height:auto;
   background-image:url(../img/arrLeft.png); background-position:center 40%;
   background-repeat:no-repeat;
   cursor:pointer;
}
#arrLeft:hover {
   background-color:#7777dd;
}

#pgNo { 
   position:fixed; bottom:25px; left:1%; width:8%; height:30px;
   margin:0px; text-align:center;
   color:#aaaacc;
}

#content { /* Link zur Inhalts Seite */
   position:fixed; bottom:25px; right:4%; width:25px; height:25px;
   margin:0px;
   background-image:url(../img/list.png); background-repeat:no-repeat;
   cursor:pointer;

   transition:width 1s, height 1s, transform 1s;
   -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
   -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
   -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */


}
#content:hover {
   transform:scale(1.5);
   -ms-transform:scale(1.5); /* IE 9 */
   -moz-transform:scale(1.5); /* Firefox */
   -webkit-transform:scale(1.5); /* Safari and Chrome */
   -o-transform:scale(1.5); /* Opera */
}

#comment {
   position:relative;
}

#siteico { /* rechts oben */
   z-Index:2;
   position:fixed; right:20px;top:15px;width:70px;height:45px;
   background-image:url(../img/myxilogo.png); background-repeat:no-repeat;
   cursor:pointer;

   transition:right 1s, top 1s, transform 1s;;
   -moz-transition:right 1s, top 1s, -moz-transform 1s; /* Firefox 4 */
   -webkit-transition:right 1s, top 1s, -webkit-transform 1s; /* Safari and Chrome */
   -o-transition:right 1s, top 1s, -o-transform 1s; /* Opera */
}
#siteico:hover {
   right:30px; top:20px;
   transform:scale(1.3);
   -ms-transform:scale(1.3); /* IE 9 */
   -moz-transform:scale(1.3); /* Firefox */
   -webkit-transform:scale(1.3); /* Safari and Chrome */
   -o-transform:scale(1.3); /* Opera */

}

         #center  { /* Inhalt */
                          z-Index:1;
                          position:absolute; top:80px; left:10%; right:10%;
                          padding-left:4%; padding-right:4%;
                                  padding-top:20px; padding-bottom:20px;
                                  width:auto; height:auto;

                          border-left-width:0px; border-top-width:0px;
                                  border-right-width:2px; border-bottom-width:2px;
                                  border-style:solid;border-color:black;

                                  background-color:#eeeeee; text-align:left;}
                 #imp        {position: fixed; z-Index:2;
                          bottom:5px; right:5px; width:20px; height:20px;
                                  margin:0px; font-size:14px; cursor:pointer;}

#content ist das , #arrRight und #arrLeft die beiden zuckenden Pfeile.

Mich irritiert, daß nur diese beiden betroffen sind und die anderen <div>s das #content:hover ignorieren, wie es sein sollte.

[NekuSoul]

Habe mal eben per Inspector in Chrome die DIV-Elemente eingefärbt und gesehen dass die Höhe der Pfeil-Container durch das Skalieren des Content-Containers für die dauer der Animation schrumpft.
Dieser Bug tritt bei mir übrigens nur auf wenn ich rauszoome (Normale Auflösung 1600x900), dann aber bei allen DIV-Containern mit Ausnahme des Haupttextes.

[ico]

Bei mir passiert da nix (Chrome Mac / OS X 10.8 )

[Worrelix]

Es scheint nur aufzutreten, wenn Scrollbalken im Fenster sind. Seltsam, das Ganze ...