CSS animation geht in Firefox nicht

[ambiente1]

Hallöle!

Ich hab die obige Webseite erstellt und bin gerade auf der Ziellinie angekommen. Jedenfalls fast...

In Chrome/Chromium/Opera/Apple geht, im Bereich "Restaurant", der Bild-Slider der alle x Sekunden zu einem anderen Bild wechselt.

In Firefox v38 unter Linux nicht.

Liegt es an Linux? Geht es unter Windows? Wenn nein, wieso geht es nicht? Ich finde keinen Fehler. ;-(

Ein Upgrade unter Linux auf v42 brachte auch keinen Erfolg.

Hoffe Ihr könnt mir weiterhelfen. Riesen Dankeschön schon mal!

PS: media-queries kommen noch...

-- Dankeschön! Alex / ambiente1

[marctrix]

Hej ambiente1,

Ich hab die obige Webseite erstellt und bin gerade auf der Ziellinie angekommen. Jedenfalls fast...

In Chrome/Chromium/Opera/Apple geht, im Bereich "Restaurant", der Bild-Slider der alle x Sekunden zu einem anderen Bild wechselt.

Stimmt. Klappt bei mir, aber trotzdem bekomme ich im Safari (gerade aktualisiert, also neueste Version) angeraten, einen neueren Browser zu benutzen... ;-)

Marc

[ambiente1]

Stimmt. Klappt bei mir, aber trotzdem bekomme ich im Safari (gerade aktualisiert, also neueste Version) angeraten, einen neueren Browser zu benutzen... ;-)

Cool, danke für den Hinweis - habe es korrigiert auf Version < 8, statt 10 ;-)

[marctrix]

Hej ambiente1,

In Firefox v38 unter Linux nicht.

Liegt es an Linux? Geht es unter Windows?

Auf OSX geht es im FF auch nicht (aktuellste Version).

Ohne es jetzt überprüft zu haben: nutzt du eine Eigenschaft, die das Verdorr-Präfix -moz- benötigt?

Marc

[ambiente1]

Ohne es jetzt überprüft zu haben: nutzt du eine Eigenschaft, die das Verdorr-Präfix -moz- benötigt?

Nicht das ich wüsste.

Verwende die "animation/@keyframes"-property jeweils alleinstehend und mit -webkit-prefix.

[marctrix]

Hej ambiente1,

Ohne es jetzt überprüft zu haben: nutzt du eine Eigenschaft, die das Verdorr-Präfix -moz- benötigt? Verwende die "animation/@keyframes"-property jeweils alleinstehend und mit -webkit-prefix.

Ja, habe es inzwischen gesehen. Tut mir leid, ich finde den Fehler auch nicht. Für mich sieht das CSS gut aus - das HTML auch. Sehr ordentlich! - Auch wenn das gerade nicht weiter hilft...

Habe die betreffenden Code-Bereiche angestarrt, durch den Validator geschickt und mit den Entwicklertools von Chrome und Firebug betrachtet. Entweder habe ich Tomaten auf den Augen oder damit ist alles ok.

Sorry, ich stehe auch auf dem Schlauch. Ich lass mal die anderen vor...

Marc

[marctrix]

Hej marctrix,

Ohne es jetzt überprüft zu haben: nutzt du eine Eigenschaft, die das Verdor-Präfix -moz- benötigt?

Sorry für den Schnellschuss, animation benötigt kein Präfix

Marc

[Matthias Apsel]

Hallo ambiente1,

Liegt es an Linux? Geht es unter Windows?

Nein, es geht unter Windows-Füchsen auch nicht-

Wenn nein, wieso geht es nicht?
Ich finde keinen Fehler. ;-(

Ich auch nicht. Versuch doch mal tatsächlich die vendor-präfixe. CanIUse schreibt „@keyframes not supported in an inline or scoped stylesheet in Firefox (bug 830056)“

Bis demnächst
Matthias

[ambiente1]

Versuch doch mal tatsächlich die vendor-präfixe.
CanIUse schreibt „@keyframes not supported in an inline or scoped stylesheet in Firefox (bug 830056)“

Hab jetzt den -moz-prefix hinzugefügt, brachte leider gar nichts. :-/
Den bug hab ich mir angeschaut, glaube aber nicht, dass es daran liegt.

[Richard Rüfenacht]

Hallo ambiente1

In Chrome/Chromium/Opera/Apple geht, im Bereich "Restaurant", der Bild-Slider der alle x Sekunden zu einem anderen Bild wechselt.

In Firefox v38 unter Linux nicht.

Liegt es an Linux? Geht es unter Windows?

Es funktioniert auch im IE nicht. Offenbar klappt das nur in Browsern, die @-webkit-keyframes slide erfordern.

Wenn nein, wieso geht es nicht? Ich finde keinen Fehler. ;-(

Es scheint, dass @keyframes slide nicht gefunden wird. Du hast in CSS @keyframes notify zwischen @-webkit-keyframes slide und @keyframes slide stehen. Das könnte ein Grund sein.

Mit besten Grüssen Richard

[ambiente1]

Es scheint, dass @keyframes slide nicht gefunden wird. Du hast in CSS @keyframes notify zwischen @-webkit-keyframes slide und @keyframes slide stehen. Das könnte ein Grund sein.

Hab die Reihenfolge angepasst, brachte auch nichts.
Wusste gar nicht, dass das eine Rolle spielen kann???

[Richard Rüfenacht]

Hallo ambiente1

Hab die Reihenfolge angepasst, brachte auch nichts.
Wusste gar nicht, dass das eine Rolle spielen kann???

Sollte keinen Einfluss haben, ich bin mir aber nicht sicher. Es ist einfach die Frage, warum @keyframes slide offenbar nicht gefunden wird.

Mich verwirrt der Code insgesamt etwas. Normal wird figure relativ positioniert in einem absolut positionierten Container. Mir erscheint alles etwas kompliziert.

Ich würde mit einem vereinfachten Beispiel versuchen, die Animation im FF zum Laufen zu bringen. @-webkit-keyframes slide funktioniert ja. Ich werde mir den Code nochmal genauer ansehen, ich habe ja funktionierende Beispiele.

Mit besten Grüssen
Richard

[quincunx]

Hallo Alex,

wenn du bei deinem

#restaurant_slider .restaurant_slider {
    position: relative;
    animation-duration: 35s;
    animation-iteration-count: infinite;
    animation-name: slide;
    animation-timing-function: linear;
    font-size: 0; 
    margin: 0;
    padding: 0;
    text-align: left;
    width: 1000%;
}

noch den Ausgangswert

   left: 0%;

hinzufügst, funzt es unter Windows auch im Firefox und im Chrome. Allerdings ist diese Konstruktion mAn nicht wirklich robust. ¿was sind width: 1000%? ¿was ist font-size: 0; Da würde ich noch etwas nachdenken.

beste grüße

quincunx

[ambiente1]

   left: 0%;

Genial - geht! :-)

   width: 1000%;

10 Bilder = 1000%. Bsp.: 15 Bilder = 1500%. Bilder sind ja per inline-block alle nebeneinander. Die keyframes sliden je nach %-Angabe dann um 100% weiter. (Bild für Bild...)

   font-size: 0;

Einzeilig? Wenn ich es weglasse, zeigt er mir die Bilder teils mit Umbruch an.

PS: Teile des Codes stammen übrigens von +Dudley Storey und seinem Projekt CSSSlidy

[quincunx]

Ah jetzt verstehe ich dieses Konstrukt ...!