CSS Animation - Safari streikt

[Gunther]

Hallo werte Selfgemeinde!

Ich möchte eine CSS Animation verwenden, bei der ein Hintergrundbild rotieren soll.

Hier ein vereinfachtes Beispiel: http://jsfiddle.net/CTn6m/8/

Das ist auch soweit alles kein Problem, außer im Safari (getestet u.a. Safari 5 Win, Safari 6 iOS).

Scheinbar "beherrscht" der Safari das "transform: rotate()" nicht ...!
Oder gibt es einen "Trick", wie man das auch dem Safari beibringen kann?

Fällt einem von euch ansonsten eine Alternative (ohne JS) ein? Mir bisher leider nicht ...! :-(

Besten Dank für eure Hilfe.

Gruß Gunther

[martachen]

Hallo,

Ich möchte eine CSS Animation verwenden, bei der ein Hintergrundbild rotieren soll.

Hier ein vereinfachtes Beispiel: http://jsfiddle.net/CTn6m/8/

Das ist auch soweit alles kein Problem, außer im Safari (getestet u.a. Safari 5 Win, Safari 6 iOS).

Scheinbar "beherrscht" der Safari das "transform: rotate()" nicht ...!
Oder gibt es einen "Trick", wie man das auch dem Safari beibringen kann?

Fällt einem von euch ansonsten eine Alternative (ohne JS) ein? Mir bisher leider nicht ...! :-(

hmm also caniuse und auch apple behaupten es geht. Wüsste jetzt auf den ersten Blick nicht voran es liegt, außer dass sich safari in letzter Zeit größte mühe gibt der neue ie zu werden

martachen

[Gunther]

Hallo,

..., außer dass sich safari in letzter Zeit größte mühe gibt der neue ie zu werden

da brauchen sie sich keine Mühe mehr zu geben - das haben sie schon längst geschafft. ;-)
Ist aber auch nicht weiters verwunderlich, wenn man mehr Resourcen in das Verklagen von Mitbewerbern steckt, als in die eigene Produkt(weiter)entwicklung.

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Scheinbar "beherrscht" der Safari das "transform: rotate()" nicht ...!

Doch, das tut er. Wenn du #animation::before durch #animation ersetzt, dreht sich das Ding. (Der Text dann natürlich auch.)

Scheinbar beherrscht Safari Animationen von Pseudoelementen nicht.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Scheinbar "beherrscht" der Safari das "transform: rotate()" nicht ...!

Doch, das tut er. Wenn du #animation::before durch #animation ersetzt, dreht sich das Ding. (Der Text dann natürlich auch.)

Hmmm ...., in meinem Safari 5 Win rotoert da immer noch nichts (im Gegensatz zu FF + Chrome) - siehe: http://jsfiddle.net/CTn6m/9/

Oder habe ich dich falsch verstanden?

Scheinbar beherrscht Safari Animationen von Pseudoelementen nicht.

Scheinbar beherrscht der so einiges nicht ...! *rolleyes*

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Hmmm ...., in meinem Safari 5 Win rotoert da immer noch nichts

Na und?

Ich hatte mir das im Safari 6 auf MacOS angesehen.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Hmmm ...., in meinem Safari 5 Win rotoert da immer noch nichts

Ich hatte mir das im Safari 6 auf MacOS angesehen.

Das erklärt's (warum es bei mir nicht funktioniert). ;-)
Und natürlich verwendet "kein normaler Mensch" freiwillig Safari unter Windows, aber bisher (bis einschl. Version 5) reichte er zum Testen, wenn man, wie ich, keinen Mac o.ä. zur Verfügung hat.

Kann ich daraus dann auch folgern, dass die Variante ohne Pseudoelement auch unter iOS 6 im Safari funktioniert?

Gruß Gunther

[Gunther]

@@Gunnar:

nuqneH

Scheinbar "beherrscht" der Safari das "transform: rotate()" nicht ...!

Doch, das tut er. Wenn du #animation::before durch #animation ersetzt, dreht sich das Ding. (Der Text dann natürlich auch.)

Scheinbar beherrscht Safari Animationen von Pseudoelementen nicht.

Frage:
Wie "löse" ich das Problem?
Per Javascript ein zusätzliches Element (anstelle des CSS Pseudo-Elements) einfügen?
Direkt im Markup wäre ja auf jeden Fall "presentational Markup" ...!

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Per Javascript ein zusätzliches Element (anstelle des CSS Pseudo-Elements) einfügen?
Direkt im Markup wäre ja auf jeden Fall "presentational Markup" ...!

Wenn wirklich kein geeignetes Element zur Verfügung steht, wäre das ’ne Möglichkeit. Per UA-Sniffing (hab ich gerade das böse Wort gesagt?) das Script nur an Safari ausliefern. Und bei Erscheinen der nächsten Safari-Version testen, ob’s noch notwendig ist, ggfs. dann nur noch an alte Safaris ausliefern.

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Per Javascript ein zusätzliches Element (anstelle des CSS Pseudo-Elements) einfügen?
Direkt im Markup wäre ja auf jeden Fall "presentational Markup" ...!

Wenn wirklich kein geeignetes Element zur Verfügung steht, wäre das ’ne Möglichkeit.

Wenn dir und mir keins einfällt, würde ich jetzt einfach mal behaupten, dass es wirklich kein anderes geeignetes gibt. ;-)

Per UA-Sniffing (hab ich gerade das böse Wort gesagt?) das Script nur an Safari ausliefern. Und bei Erscheinen der nächsten Safari-Version testen, ob’s noch notwendig ist, ggfs. dann nur noch an alte Safaris ausliefern.

Wenn es ja eh nur per JS geht, dann hilft natürlich auch so etwas wie:

if(/Constructor/.test(window.HTMLElement)) {...}  

um Safari Browser zu identifizieren (also ohne UA-Sniffing).

Besten Dank für deine Hilfe! :-)

Gruß Gunther