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;}
Mich irritiert, daß nur diese beiden betroffen sind und die anderen <div>s das #content:hover ignorieren, wie es sein sollte.