Onepage_XH: (s)doc(s)

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
olape
Posts: 847
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Onepage_XH: (s)doc(s)

Post by olape » Sat Jun 08, 2019 7:37 pm

frase wrote:
Sat Jun 08, 2019 7:19 am
Rufe mal diese Seite auf, scrolle nicht sondern klicke sofort auf "Impressum".
Da dürftest du Ähnliches erleben.
Nein, das wirkt durch die viele, schnelle Scrollerei etwas unruhig, aber andere Effekte scheint es nicht zu geben.

frase wrote:
Sat Jun 08, 2019 7:19 am
Ich habe mal den Themeswitcher eingebaut, mit einem 2. Template ohne fixe Backgrounds.
Wenn du magst, könntest du mal schauen ob der Effekt auch mit dem 2. Template auftritt.
Auch hier tritt das auf.

frase
Posts: 2921
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage_XH: (s)doc(s)

Post by frase » Sun Jun 09, 2019 5:59 am

olape wrote:
Sat Jun 08, 2019 7:37 pm
Auch hier tritt das auf.
Hm, sehr bedauerlich. Was soll ich tun?
Da ich es nicht nachvollziehen kann, kann ich die Ursache nicht finden - ganz schön blöde Sache das.
Also lasse ich das Template erstmal liegen.

Tata
Posts: 2986
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Onepage_XH: (s)doc(s)

Post by Tata » Sun Jun 09, 2019 7:13 am

olape wrote:
Sat Jun 08, 2019 7:37 pm
Nein, das wirkt durch die viele, schnelle Scrollerei etwas unruhig, aber andere Effekte scheint es nicht zu geben.
Eigentlich finde ich es auch nur als Geschmacksache. Mich stört es nnicht und finde es als ein Animationseffekt.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Holger
Site Admin
Posts: 3098
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: Onepage_XH: (s)doc(s)

Post by Holger » Sun Jun 09, 2019 11:59 am

Ich hab' mir das jetzt auch einmal angeschaut.

Zunächst mal sollte eine aktuellere jQuery-Version > 3 verwendet werden, weil dann die JS-Animationen insgesamt besser funktionieren sollten (RequestAnimationFrame erst ab jQuery 3.irgendwas).

Mit den mir verfügbaren iOS-Geräten ist das Problem nachvollziehbar. Beim Scrollen werden die im Hintergrund liegenden Elemente teilweise komplett sichtbar (aktuelles iOS / iPhone und auch ältere Version vom iPad2). Man sieht dann u.U. alle Hintergrundelemente (Kopfzeile, Fußzeile, Background).

Dann habe ich das Template lokal installiert und erstmal mit der Vanilla-onpage.js des OnePage-Plugins getestet: gleicher Fehler.
Jetzt zurück zur jQuery-onepage.js aus dem Template, aber ALLE Animationen entfernt: gleicher Fehler :shock: .

Okay zurück zum Original auf bplaced.net und jetzt ein ganz altes Android-Tablet (HP-Touchpad, Android 4.4.4! - also uralt). Ergebnis mit Chrome Firefox... : kein Problem :!: . Okay, die Performance kann man vergessen, aber keine Darstellungsprobleme. Und die Seite läuft insgesamt auch nicht hakeliger als andere, moderne Durchschnittsseiten.

MacOS-Safari 11.1.2 auf einem älteren MacBook Pro, sowie alle sonstigen Deskop-Browser die ich habe, haben kein Problem.

Fazit:
der Effekt mit den sichtbaren Hintergrundelementen scheint mir ein iOS-spezifisches Feature zur Verbesserung der Nutzererfahrung zu sein. Wenn man ausgiebig spielt und schnell per Touchgesten hin und her scrollt, werden Hintergrundelemente auch sichtbar. Das ist mir (unbewusst) auch schon an anderer Stelle begegnet. Es scheint mir fast, als würde Safari scrollende Elemente von sich aus auch beeinflussen, um schönere Effekte bei schwacher Hardwareperformance zu haben. Vielleicht finde ich nochmal ein Beispiel...

Eine Lösung wüsste ich jetzt nicht wirklich. Aber vielleicht wäre es machbar, die Hintergrundelemente in Abhängigkeit der Scrollposition unsichtbar zu machen (visibility / display?)?.
Traurig nur, dass iOS Nutzer nicht wirklich die Wahl beim Browser haben, da alle Alternativ-Browser unter iOS nur Apples hauseigene Engine verwenden dürfen... Und, im Umkehrschluss, noch trauriger, dass die Seite sogar unter Android 4.4.4 funktioniert.

frase
Posts: 2921
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage_XH: (s)doc(s)

Post by frase » Sun Jun 09, 2019 12:43 pm

Ich muss es einfach mal versuchen: Ich schildere euch meine monetären Probleme genau so, wie die mit den Templates. Da gibts doch sicher genau so gute Hilfestellung - oder?
:D

Also, trotz Pfingst-Sonntag und schönem Wetter, ihr kniet euch ja wieder mal ganz schön rein.
Danke!
Holger wrote:
Sun Jun 09, 2019 11:59 am
Zunächst mal sollte eine aktuellere jQuery-Version > 3 verwendet werden, ...
Stimmt. Die ältere Version hatte aber den Grund, weil die mCustomScrollBox das Style nicht richtig mit jQ>3 erkennt.
Die schmale Scrollbar neben dem Menü sieht nun etwas anders aus.
Holger wrote:
Sun Jun 09, 2019 11:59 am
Fazit:
der Effekt mit den sichtbaren Hintergrundelementen scheint mir ein iOS-spezifisches Feature zur Verbesserung der Nutzererfahrung zu sein.
Ja. In jede, auch vom kleinsten Hund auf dem Gehweg hinterlassene Tretmine, tappt der Herr Frank rein.
Zielsicher die Problemstelle erwischt.

Ich habe mal zwei weitere Templates hinzugefügt. Beide ohne fixen Header und Footer.
Nr. 3 = mit fixen Hintergrundkacheln
Nr. 4 = ohne
Bringt das irgendwas?

frase
Posts: 2921
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage_XH: (s)doc(s)

Post by frase » Sun Jun 09, 2019 1:06 pm

frase wrote:
Sun Jun 09, 2019 12:43 pm
Die ältere Version hatte aber den Grund, weil die mCustomScrollBox das Style nicht richtig mit jQ>3 erkennt.
Die schmale Scrollbar neben dem Menü sieht nun etwas anders aus.
So ganz nebenbei habe ich dieses Problem nun auch gelöst. *freu*

Wenn man vergisst das Skript mit eigenen Wünschen zu initialisieren, muss man sich nicht wundern :x

Holger
Site Admin
Posts: 3098
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: Onepage_XH: (s)doc(s)

Post by Holger » Sun Jun 09, 2019 1:11 pm

frase wrote:
Sun Jun 09, 2019 12:43 pm
Ich habe mal zwei weitere Templates hinzugefügt. Beide ohne fixen Header und Footer.
Nr. 3 = mit fixen Hintergrundkacheln
Nr. 4 = ohne
Bringt das irgendwas?
Das hatte ich auch schon getestet. Es funktioniert, sobald die fixen Elemente weg sind. Nr. 3 und 4 funktionieren beide.
Performance-Unterschiede zwischen 3 und 4 sehe ich nicht wirklich. Insgesamt ist mein iPad2 aber so überaltet (gibt auch keine Updates mehr), dass die Performance eh nicht so toll ist. Aber ich bin überrascht, das das Template doch "so gut" läuft.

frase
Posts: 2921
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage_XH: (s)doc(s)

Post by frase » Sun Jun 09, 2019 1:41 pm

Holger wrote:
Sun Jun 09, 2019 1:11 pm
Es funktioniert, sobald die fixen Elemente weg sind. Nr. 3 und 4 funktionieren beide.
Super!
Jetzt muss ich mir noch überlegen, welche Version ich herausgebe.
Übrigens: Auf meinem Androiden mit 4.4.2(!) läuft es auch einigermaßen flott.
Da sind aktuelle Browser (und die Hardware) wichtiger als das Betriebssystem.
Und natürlich ein gewisser Herr I., der sich a weng um die Programmierung gekümmert hat.
Dass die Animationen (außer Owl) reines CSS sind, ist sicher auch von Vorteil.

Ich warte jetzt noch Olapes und Ludwigs eventuellen Verrisse ab, bevor ich's veröffentliche ;-)

Holger
Site Admin
Posts: 3098
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: Onepage_XH: (s)doc(s)

Post by Holger » Sun Jun 09, 2019 2:36 pm

frase wrote:
Sun Jun 09, 2019 1:41 pm
Super!
Jetzt muss ich mir noch überlegen, welche Version ich herausgebe.
Tja, wer die Wahl hat...

Oder du gehst den unliebsamen Weg Browsersniffing und gibst nur bei iOS-Devices fixe Header und Footer aus.
Hier mal eine schnelle Funkion von Stackoverflow:

Code: Select all

function iOS() {

  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];

  if (!!navigator.platform) {
    while (iDevices.length) {
      if (navigator.platform === iDevices.pop()){ return true; }
    }
  }

  return false;
}

if (iOS()) {
    $("#header").css("position","relative");
    $("footer").css("position","relative");
    $("#wrapper").css("margin","0");
}
Den Code ganz unten in den Skript-Block der template.htm packen. Funktioniert soweit. Nur: müsste das !important beim <footer> - Tag noch weg, sonst klappt es nicht:

Code: Select all

position: fixed !important;

frase
Posts: 2921
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Onepage_XH: (s)doc(s)

Post by frase » Sun Jun 09, 2019 2:53 pm

Holger wrote:
Sun Jun 09, 2019 2:36 pm
Oder du gehst den unliebsamen Weg Browsersniffing und gibst nur bei iOS-Devices fixe Header und Footer aus.
Oor nööö, ich werd' doch jetzt nicht noch zum Sniffer?!
Da bin ich überhaupt kein Freund von.
Da kann ich ja gleich das mobile-Plugin nehmen und für jedes Gerät ein eigenes Stylesheet schreiben - pfhhh!
Da verzichte ich lieber auf die fixen Dinger und warte, bis die Browserhersteller (webkit, chromium) mit dieser fürchterlichen Trickserei aufhören. Irgendwann wird's denen schon jemand sagen.

Post Reply