Hilfe gesucht - mobile Devices

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Hilfe gesucht - mobile Devices

Post by frase » Sat Jun 02, 2018 8:27 am

Hi,
aus einem Kundenprojekt heraus, bin ich auf die Idee gekommen, mal wieder ein Template für die XH-Community zu bauen - vielleicht!?

Mir ist nämlich die altbekannte Pseudoklasse :target mal wieder eingefallen - die ich bislang zwar kannte, aber nie angewendet habe. Ich habe jetzt also begonnen, ein fhs-target-Template zu erstellen (noch sehr früh).
:target verwende ich für die Anzeige der Navigation - eben an zwei verschiedenen Stellen der Seite. Normal befindet sich das Menü unten im Footer. Es zeigt nur Menüpunkte Level 1 an. Am oberen rechten Rand der Seite befindet sich noch ein Hamburger-Symbol. Ein Klick darauf öffnet die Ansicht des "normalen" Menüs mit entsprechenden Unterpunkten. Das ist das ":target-Menü". Es ist NICHT zweimal auf der Seite, sondern wird nur durch :target an einer anderen Stelle angezeigt (im Footer verschwindet die Anzeige). Damit ist alles, was die Navigation betrifft mit reinem CSS gelöst. Ist Javacript ausgeschaltet funktioniert trotzdem alles identisch - auch die Animation.

Zu diesem Menü lautet meine Frage einfach: Ist das sinnvoll und praktikabel?

Ich habe aber noch ein schwerwiegenderes Problem auf meiner Testseite (Link unten).
Es gibt eine Landingpage (Start), die als einzeln bearbeitbare XH-Seite vorhanden ist. Die Landingpage befindet sich in einem Container (splash-container) und hat ein festes Hintergrundbild. Sinnigerweise habe ich für das Thema :target eine Zielscheibe gewählt (farbig, SVG, 2K).
Der (allgemeine) Body hat ebenfalls eine Zielscheibe als festen Hintergrund - allerdings schwarz/weiß (SVG, 2K).
Kommt man auf die Landingpage und scrollt dann nach unten, wird je nach Scrollposition aus der farbigen Zielscheibe eine schwarz-weiße.
Das funktioniert in allen gängigen Browsern ziemlich gut.
Auch in einigen mobile-Browsern (zumindest die, die ich testen kann) klappt das - nur nicht in Chrome unter Android. Hier scrollt das Hintergrundbild mit und ist nicht fix.
Klar, dass ich mir nun mehrere Stunden Zeit nahm und nach einer Lösung suchte - ohne Erfolg!
Was herauskam:
Einige Browserhersteller unterbinden fixe Hintergrundbilder in ihren mobile-Browser-Versionen aus "Energiespar- und Performance-Gründen"!
Fixe Hintergrundbilder (gerade bei Parallax-Effekten) verlangen enorme Rechenleistung und damit auch Strom. Um bei Mobilgeräten einen (fraglichen) Wettbewerbsvorteil zu haben, wird z.B. in mobile-Chrome diese Funktion unterbunden.

Ich fand im Netz einige Workarounds, die dieses Problem umgehen sollten - taten es in meinem Fall aber nicht.
Hier kommt meine Frage:
Kennt jemand eine Lösung? - Oder: Ist das alles gar nicht so schlimm?

Hier noch der Link zu meiner Testseite. Alles noch "roh" nicht fertig gestyled. Alles Fantasie (Firmennname, Logo usw.)! Keine Inhalte!
Anschauen

P.S.:
Das Hamburger-Symbol kann man mit Accesskey [1] öffnen und mit [2] wieder schließen - was ziemlich sinnfrei ist, denn diese Tasten-Kombi wird niemand kennen ;-)
Trotzdem ist das Menü "zugänglich".

Noch ein P.S.:
Als CSS-Framework habe ich mal "PURE" probiert. Mal sehen, ob das was bringt.

Nö.
Last edited by frase on Tue Jun 12, 2018 8:07 am, edited 1 time in total.

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

Re: Hilfe gesucht - mobile Devices

Post by Tata » Sat Jun 02, 2018 9:17 am

MM einfach SUPER!!! Ich würde wohl nichts mehr damit weitermachen. Es ist zwar möglich (theoretisch) fast alles so einstellen, dass es jedem Gerät, jedem Browser, jedem Besucher entgegenzukommen, aber ist es unbedingt nötig?
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.

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

Re: Hilfe gesucht - mobile Devices

Post by frase » Sat Jun 02, 2018 10:09 am

Tata wrote:
Sat Jun 02, 2018 9:17 am
Ich würde wohl nichts mehr damit weitermachen.
Hm, meinst du, das gesamte Template sterben lassen?

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

Re: Hilfe gesucht - mobile Devices

Post by Tata » Sat Jun 02, 2018 11:09 am

Umgekehrt. So wie es jetzt steht, ist es einfach konkurenzloss super. Es ist vieles möglich, soweit es um Design geht, aber die browserabhängige Funktionalität finde ich nicht so wichtig.
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.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Hilfe gesucht - mobile Devices

Post by lck » Sat Jun 02, 2018 12:25 pm

frase wrote:
Sat Jun 02, 2018 8:27 am
aus einem Kundenprojekt heraus, bin ich auf die Idee gekommen, mal wieder ein Template für die XH-Community zu bauen - vielleicht!?
Super, gefällt mir.
frase wrote:
Sat Jun 02, 2018 8:27 am
... nur nicht in Chrome unter Android. Hier scrollt das Hintergrundbild mit und ist nicht fix.
Kann ich bestätigen, bei mir genauso.

Ich weiß nicht ob es hilft, aufgefallen ist mir, dass der html- und der body_Bereich unterschiedliche Höhen haben. Ich habe dem body-Tag mal ein height von 100% verpasst, so stimmen beide überein. Aber dann tritt genau der Effekt auf, das Hintergrundbild scrollt mit (getestet mit Chrome Brosertools z.B. iPad). Entfernt man nun das overflow-x: hidden; im html-Tag so funktioniert es wie gewollt :?
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

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

Re: Hilfe gesucht - mobile Devices

Post by frase » Sat Jun 02, 2018 12:54 pm

lck wrote:
Sat Jun 02, 2018 12:25 pm
Super, gefällt mir.
Gut. Aber - wat sagstn zu dem :target-Menü?
Geht das überhaupt so?
Da wäre mir deine Meinung schon wichtig.
lck wrote:
Sat Jun 02, 2018 12:25 pm
Ich weiß nicht ob es hilft, aufgefallen ist mir, dass der html- und der body_Bereich unterschiedliche Höhen haben. Ich habe dem body-Tag mal ein height von 100% verpasst, so stimmen beide überein. Aber dann tritt genau der Effekt auf, das Hintergrundbild scrollt mit (getestet mit Chrome Brosertools z.B. iPad). Entfernt man nun das overflow-x: hidden; im html-Tag so funktioniert es wie gewollt
Leider ergibt das noch mehr unerwartete Effekte auf dem Android-Tablet mit Chrome.
Einzige Änderung, die ich jetzt (nach Tests mit deinen Vorschlägen) gemacht habe ist: html Höhe 100vh statt 100%.
Bei Chrome kommt nach erschwerend hinzu, dass das Browsermenü beim Wischen verschwindet und somit die Viewporthöhe wieder anders ist. Das kann man im FF unter Android ausschalten (was ich auch so habe). Hat allerdings nichts mit dem Wegscrollen des farbigen Hintergrundbildes zu tun.
Eine vefixte (sorry) verflixte Sache.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Hilfe gesucht - mobile Devices

Post by lck » Sat Jun 02, 2018 1:32 pm

frase wrote:
Sat Jun 02, 2018 12:54 pm
Gut. Aber - wat sagstn zu dem :target-Menü?
Das muss ich mir noch genau anschauen, je weniger Javascript desto besser.
frase wrote:
Sat Jun 02, 2018 12:54 pm
Leider ergibt das noch mehr unerwartete Effekte auf dem Android-Tablet mit Chrome.
Verschiebe doch mal das Hintergrundbild von html zum body-Tag, das sollte ganauso funktionieren.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

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

Re: Hilfe gesucht - mobile Devices

Post by frase » Sat Jun 02, 2018 1:44 pm

lck wrote:
Sat Jun 02, 2018 1:32 pm
Verschiebe doch mal das Hintergrundbild von html zum body-Tag, das sollte ganauso funktionieren.
Es gab irgendeinen wichtigen Grund, warum ich das so gemacht habe - den habe ich allerdings vergessen ;-)
Trotzdem getestet: Keine Änderung.
Es geht ja eigentlich auch nur um das Hintergrundbild im Div "splash-container".

Das ist nicht irgend so ein banales CSS-Problem.
Hier muss ein echter "Hack" her.

P.S.:
Ich bekomme die Nachrichten vom Forum (und nur von hier) neuerdings erst mit ca. 1 Tag Verspätung.
Kann das jemand bestätigen? Gibt es einen Grund?

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

Re: Hilfe gesucht - mobile Devices

Post by Holger » Sat Jun 02, 2018 4:27 pm

frase wrote:
Sat Jun 02, 2018 1:44 pm
.S.:
Ich bekomme die Nachrichten vom Forum (und nur von hier) neuerdings erst mit ca. 1 Tag Verspätung.
Kann das jemand bestätigen? Gibt es einen Grund?
Hmm, eben getestet... kam sofort bei mir an :? .

BTW: schönes Template, tolle Arbeit! Mitreden beim aktuellen Problem kann ich leider nicht :( .

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Hilfe gesucht - mobile Devices

Post by lck » Sat Jun 02, 2018 8:13 pm

frase wrote:
Sat Jun 02, 2018 1:44 pm
Ich bekomme die Nachrichten vom Forum (und nur von hier) neuerdings erst mit ca. 1 Tag Verspätung.
Kann das jemand bestätigen?
Ja, gerade eben erst die Nachrichten erhalten, das du und Holger geantwortet haben und das erst um 22:05 Uhr.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply