ambiente1: CSS animation geht in Firefox nicht

problematische Seite

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

akzeptierte Antworten

  1. 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

    1. 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 ;-)

  2. 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

    1. 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.

      1. 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

    2. 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

  3. 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

    --
    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
    1. 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.

  4. 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

    1. 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???

      1. 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

  5. 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

    1.    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

      1. Ah jetzt verstehe ich dieses Konstrukt ...!