CSS3 Transitions Opera

[simonpicos]

Ich habe vorhin ein wenig mit den CSS3-transitions rumexperimentiert. Ich habe hinter einen Div 4 Navigationspunkte gelegt, welche beim Überfahren mit der Maus herausfahren. Im Firefox (6) klappts ganz gut, nur im Opera werden die Animationen seltsam gerendert. Die einzelnen Punkte fahren nur teilweise heraus und bleiben dann "hängen". Zur Veranschaulichung ein Screenshot und ein Link:



http://labs.simonpicos.hostingsociety.com/#

Wo könnte das Problem liegen? Kann man das irgendwie beheben?

Über Antworten würde ich mich freuen

Simon

 

[kyle66]

AW: CSS3 Transitions Opera

Hallo simonpicos,

zunächst einmal muss ich sagen, dass mir das ganze sehr gut gefällt. Aber nun zu deinem, bzw. Operas Problem. Das Problem scheint nur aufzutreten, wenn die Elemente gedreht werden. Da hat Opera aber anscheinnend noch mehr Probleme. Gib dem gedrehten "a" mal ein padding-right mit. Dann vergrößert Opera richtigerweise zwar den Link nach rechts, oben; allerdings wird fälschlicherweise auch der selbe Wert nach rechts als Platz freigehalten (Sieht man besser, wenn die Links um 90° gedreht sind).

Seltsamerweise funktionieren die Transitions wunderbar, solange man Dragonfly offen hat (Strg+Umsch+I).

Grüße
kyle

 

[kyle66]

AW: CSS3 Transitions Opera

Hallo nochmal,

es scheint aber zu funktionieren, wenn du die einzelnen Links nicht rotierst, sondern das nav_c-Element.

Grüße
kyle

 

[simonpicos]

AW: CSS3 Transitions Opera

Hallo simonpicos,

zunächst einmal muss ich sagen, dass mir das ganze sehr gut gefällt. Aber nun zu deinem, bzw. Operas Problem. Das Problem scheint nur aufzutreten, wenn die Elemente gedreht werden. Da hat Opera aber anscheinnend noch mehr Probleme. Gib dem gedrehten "a" mal ein padding-right mit. Dann vergrößert Opera richtigerweise zwar den Link nach rechts, oben; allerdings wird fälschlicherweise auch der selbe Wert nach rechts als Platz freigehalten (Sieht man besser, wenn die Links um 90° gedreht sind).

Sorry, ich kann dir nicht so ganz folgen Das a hat doch schon ein padding-right, und zwar 8px. Oder meinst du was anderes?

Danke übrigens für das Kompliment

es scheint aber zu funktionieren, wenn du die einzelnen Links nicht rotierst, sondern das nav_c-Element.

Das wiederum wäre eine Möglichkeit. Das wäre dann aber ein ziemlich Aufwand, die einzelnen a's zu positioniern (Aufgrund der verschiedenen Textlängen)

Danke dir aber schon mal für deine Tipps/Ideen

Simon