Darstellungsfehler bei Animationen auf Mobile Seiten

[Laphroaig_25]

Hallo, ich habe das Problem, das bei der Smartphone Ansicht (sowohl bei Safari, Chrome & FF) es Darstellungsfehler gibt, wenn eine Animation (FadeIn mit 900 ms Verzögerung) aktiv sind.

Fehler 1: Man öffnet eine Seite und es werden nur das Headerbild und die Überschrift angezeigt. Nach der Überschrift ist alles weiß - erst wenn man nach unten scrollt, um nachzusehen ob vielleicht irgendwo doch noch Inhalte sind, werden sie plötzlich angezeigt. Deaktiviert man die Verzögerung (im Artikel), wird alles richtig angezeigt. Den Fehler habe ich bei allen Menüpunkten meiner Seite.

Fehler 2: Dieser betrifft nur einen Menüpunkt: Ich habe weiter unten auf der Seite einen Artikel mit mehreren gleichen Inhaltselementen (Bild/Text Boxen). Diesem Artikel habe ich die gleiche Animation zugewiesen wie bei Fehler 1: Der Artikel wird nie angezeigt, wenn die Animation aktiv ist. Hebe ich in dem Artikel die Animation auf und stelle die Animation bei jedem einzelnen Inhaltselement ein, dann werden die Inhalte dargestellt.

Beispiel URL für beide Fehler: https://telecrew.de/kommunikationsloesungen (Contao 5.3.33 / Eclipse X v6.0.9)

[Tim]

Hallo,
zu 1: Der Animations-Effekt startet standardmäßig, wenn ein Element min. ca 1/3 sichtbar wird im Viewport. Das ist im Moment des Ladens und ohne Interaktion durch den Benutzer hier nicht der Fall. Daher verbleibt der Bereich "unsichtbar", bis das Element ausreichend weit im Viewport ist.

Zugegeben, eine ungünstige Konstellation für diesen Moment hier auf kleinen Bildschirmen, aber grundsätzlich korrekt. Vielleicht auf den Effekt verzichten im Sinne des Benutzers oder den Bereich gezielt näher an die Überschrift setzen.

Artikel wird nie angezeigt, wenn die Animation aktiv ist. Hebe ich in dem Artikel die Animation auf und stelle die Animation bei jedem einzelnen Inhaltselement ein, dann werden die Inhalte dargestellt.

Die letzten beiden Artikel sind aufgrund der gesetzten Sichtbarkeits-Steuerung entweder nur für Smartphones/Tables sichtbar gesetzt oder der andere nur für Desktop.