Hin und wieder kommt es bei Avada zu einem unschönen Effekt auf iPhone & Co: Versucht man die Seite nach dem Laden zu scrollen, sind mehrere Anläufe nötig, da der Bildlauf immer wieder “zurück federt”. Diese Hänger beim Scrollen unter Avada lassen sich mit ein wenig CSS Code leicht beheben.
Avada Scrollproblem: Die Lösung
Im WordPress Backend klicken wir auf Avada / Options / Custom CSS und fügen dort den folgenden CSS-Code ein:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* Fix iOS scrolling issue */ @media only screen and (max-device-width:800px) { html { scroll-behavior: smooth; } body { height: 100vh; width: 100vw; overflow-y: auto; overflow-x: hidden; } #wrapper { overflow-x: visible !important; } } |
Dem Browser wird explizit mitgeteilt, daß der Body der Seite 100% des Viewports belegt. Somit weiss der Browser, dass es etwas zum Scrollen gibt und die Hänger unterbleiben.
Die Anpassung für #wrapper löst übrigens ein weiteres Avada Scroll-Problem: waagrechtes Scrollen der Seiteninhalte über den Bildschirmrand hinaus wird unterbunden.
Damit sollten nun alle Avada-Scrollprobleme gelöst sein :-)
