Page 19 of 21

Re: Onepage_XH: (s)doc(s)

Posted: Sat Jun 08, 2019 7:37 pm
by olape
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.

Re: Onepage_XH: (s)doc(s)

Posted: Sun Jun 09, 2019 5:59 am
by frase
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.

Re: Onepage_XH: (s)doc(s)

Posted: Sun Jun 09, 2019 7:13 am
by Tata
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.

Re: Onepage_XH: (s)doc(s)

Posted: Sun Jun 09, 2019 11:59 am
by Holger
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.

Re: Onepage_XH: (s)doc(s)

Posted: Sun Jun 09, 2019 12:43 pm
by frase
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?

Re: Onepage_XH: (s)doc(s)

Posted: Sun Jun 09, 2019 1:06 pm
by frase
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

Re: Onepage_XH: (s)doc(s)

Posted: Sun Jun 09, 2019 1:11 pm
by Holger
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.

Re: Onepage_XH: (s)doc(s)

Posted: Sun Jun 09, 2019 1:41 pm
by frase
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 ;-)

Re: Onepage_XH: (s)doc(s)

Posted: Sun Jun 09, 2019 2:36 pm
by Holger
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;

Re: Onepage_XH: (s)doc(s)

Posted: Sun Jun 09, 2019 2:53 pm
by frase
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.