Ergebnis 1 bis 12 von 12

Thema: IE 10 und 11 - Darstellungsproblem mit CSS Animations [gelöst]

  1. #1
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard IE 10 und 11 - Darstellungsproblem mit CSS Animations [gelöst]

    Hallo liebe Community,


    mittels CSS Animations habe ich eine Menünavigation gebaut, die im IE 11 aber nicht läuft, obwohl dieser CSS Animationen unterstützen sollte, laut Can I Use.

    Die Seite um die es geht findet Ihr hier.

    Für Hinweise bin ich wirklich sehr dankbar!


    Viele Grüße

    Stefan
    Geändert von Stefan01 (03.02.2015 um 09:42 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  2. #2
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Anscheinend bestand das Problem auch schon beim IE 1o da habe ich einige Beiträge gefunden. Aber das Problem wurde scheinbar im IE 11 behoben.
    Der IE 10 nhatte wohl Probleme @keyframe Animationen, die in Media-Queries eingebundne waren richtig auszulesen.

    Hier die links zu den Beiträgen:

    http://stackoverflow.com/questions/1...on-not-working

    http://stackoverflow.com/questions/1...-a-media-query

    http://css-tricks.com/forums/topic/i...imation-issue/

    Ich bin jetzt genau so schlau wie zuvor......

    Vielleicht hatte ein anderes Community Mitglied bereits ein ähnliches Problem und kann mir hier auf die Sprünge helfen.
    Wäre wirklich sehr nett, da das schon eine produktive Website ist.

    Viele Grüße und schonmal Danke!
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  3. #3
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Die Keyframe Definition musst du ja nicht in den media queries stehen haben. Definiere die Animationen mit unterschiedlichen Namen einfach außerhalb und per Media Query setzt du dann die richtige Animation fest.

    Brauchst du überhaupt unbedingt verschiedene Animationen je nach Viewport Größe?

  4. #4
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Das nenne ich mal schnell!

    Vielen Dank @Spooky jetzt schon zum zweite Mal. Ich habe verschiedene Animationen in verschiedenen Stylesheets. Zwei Animationen erzeugen den Treppeneffekt beim Einblenden der Menüpunkte (jeweils eine Animation für die Startseite und eine Animation für die Folgeseiten (küzerer Intervall)). Eine Animation erzeugt die Menüleiste beim Aufruf der Startseite und dann noch die letze Animation, die den Texthintergrund (.mod_article) animiert, der aus der Menüleiste 'slidet' wenn deren Animation vollständig ist.

    Für die Animationen habe ich insgesamt 3 Stylesheets die im jeweiligen Seitenlayout aktiviert bzw. deaktiviert sind (Startseite und Folgeseiten)
    Die Media-Queries habe ich bei den Stylesheets mit den Animationen mittlerweile entfernt.

    Der Grund für die verschiedenen Animationen ist, dass die Animationen je nach viewport-orientation (portrait bzw. landscape) verschiedene Größen benötigen. Kann sein, dass ich da zu kompliziert und umständlich an die Sache rangegangen bin. Wieder ein Punkt der für mobile-first spricht.

    Ich werde mich mal durch meine CSS Daten arbeiten und Deinen Tipp befolgen. Wenn sich was getan hat poste ich hier umgehend die Lösung.


    Viele Grüße


    Stefan
    Geändert von Stefan01 (02.02.2015 um 16:36 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  5. #5
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Guten Moren liebe Community!

    Irgendetwas habe ich scheinbar übersehen. Die Anpassungen habe ich alle gemacht.

    screenshot1.jpg

    Trotzdem stellt der IE die Navigation nicht richtig dar, obwohl der IE 11 das Problem mit den keyframes in den Media Queries eigentlich behoben haben sollte.

    screenshot2.jpg

    Laut eines anderen Tipps den ich über Google gefunden habe, sollten die CSS mit den Media-Queries zuerst geladen werden. Die @keyframe Animationen sind alle interne CSS Daten, die ich aber im Seitenlayout an die erste Position gebracht habe. Oder wäre es sinnvoll die ganzen keyframes in ein externes CSS file auszulagern und über einen zusätzlichen head-tag einzubinden?

    Sehe gerade vor lauter Bäumen den Wald nicht mehr......

    Viele Grüße

    Stefan
    Geändert von Stefan01 (03.02.2015 um 08:56 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  6. #6
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Du hast die Animationsdefinition immer noch in einem Media Query, nämlich
    PHP-Code:
    @media screen {
        ...

    Kannst du das nicht entfernen? Oder fügt Contao das immer ein, wenn man interne Stylesheets benutzt.

  7. #7
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Danke für die Antwort!
    Oder fügt Contao das immer ein, wenn man interne Stylesheets benutzt.
    Das macht Contao automatisch, wenn ich die Medientypen weglasse bekomme ich eine Fehlermeldung. Also wird mir nichts anderes übrig bleiben, als die ganzen CSS files auszulagern.

    Wäre es bei den keyframe Animationen besser mit from 0%...to 100%.. zu arbeiten?
    Oder kann man das from.... to... mittlerweile vernachlässigen?



    Viele Grüße

    Stefan
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  8. #8
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard Problem gelöst!

    Also erstmal ein riesen großes Dankeschön an Spooky für die schnelle und perfekte Unterstützung!

    Das Problem lag wirklich daran, die Animationen auszulagern und vor den restlichen Stylesheets zu laden, um den von Contao standardmäßig integrierten Medientyp zu umgehen.

    Einfach die CSS files runterladen und mittels Dateiverwaltung wieder importieren und dann im Seitenlayout über 'Externe Stylesheets' einbinden.

    Viele Grüße


    Stefan
    Geändert von Stefan01 (03.02.2015 um 09:16 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  9. #9
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    Hm, habe nur begrenzt Erfahrung mit keyframe Animations. Ich denke ob du from/to oder 0% ... 100% einsetzt hängt davon ab, was du machen möchtest. Folgendes
    PHP-Code:
    @keyframes anim {
      
    0% {
        
    transformtranslate(0, -100%);
      }

      
    100% {
        
    transformnone;
      }

    sollte ja equivalent zu
    PHP-Code:
    @keyframes anim {
      
    from {
        
    transformtranslate(0, -100%);
      }

      
    to {
        
    transformnone;
      }

    sein, denke ich.

  10. #10
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Laut W3C ist es wohl gleich welche Schreibweise man nutzt, solange die Definition richtig geschrieben ist.

    The keyword ‘from’ is equivalent to the value ‘0%’. The keyword ‘to’ is equivalent to the value ‘100%’. Note that the percentage unit specifier must be used on percentage values. Therefore, ‘0’ is an invalid keyframe selector.

    Viele Grüße

    Stefan
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    35.517
    Partner-ID
    10107

    Standard

    % brauchst du halt dann, wenn du auch Zwischenschritte hast.

  12. #12
    Contao-Nutzer Avatar von Stefan01
    Registriert seit
    11.09.2010.
    Beiträge
    247

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    % brauchst du halt dann, wenn du auch Zwischenschritte hast.
    Genau, ist aber wohl bei den meisten keyframe Animationen der Fall, sonst hätte ich mit transitions gearbeitet. Aber da in meinem Fall die Animationen selbständig ablaufen sollten und nicht erst durch einen event wie :hover (hätte ich auch mit einer onload Funktion lösen können, aber da bin ich einfach nocht nicht fit, da es meine erste CSS Animation ist) habe ich mich eben für die keyframe Varainate entschieden.


    Viele Grüße

    Stefan
    Geändert von Stefan01 (03.02.2015 um 09:41 Uhr)
    Was wir brauchen, sind ein paar verrückte Leute; seht euch an, wohin uns die Normalen gebracht haben.

    George Bernard Shaw

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •