(gelöst) iOS7-CSS: Stylesheet wird nicht immer geladen

[FunkOdyssey]

Ich habe mal eine Frage in die Runde. Ich habe auf allen Ports (8083-8085) die verschiedenen iOS7-Versionen aktiv. Ich habe aber sehr oft das Problem, dass beim Aufruf oder Refresh einer Seite die CSS-Defintionen nicht vorhanden sind. Scheinbar wird das Stylesheet gar nicht gezogen. Ich sehe nur die Room-Icons und die Standard-blauen HTML-Links.

Ich habe das NUR auf iPads und iPhones. Also Safari.
Ein Aufruf von Firefox und Chrome bereitet keine Probleme.

Kennt ihr dieses Phänomen?

[FunkOdyssey]

Schade. Es wundert mich, dass ich alleine mit dem Problem bin.

Anbei mal ein Screenshot.

[fhainz]

Hallo!

Sry, ich habe anscheinend deinen letzten Post übersehen.

Ich nutzte auch auf allen Geräten den iOS7 Style das Problem hatte ich aber nie. Aber ich denke ich habe zu diesem Thema mal etwas im Forum gelesen. Müsstest du mal suchen.
Mir fällt dazu nur update force und cache löschen ein. Aber ich vermute das hast du schon gemacht.

[FunkOdyssey]

Welchen Cache meinst du? Meinen Browser-Cache? Ja, dann habe ich schon alles versucht. Schade.

[fhainz]

Vielleicht noch ein raspi update?

[FunkOdyssey]

Danke, aber der sollte aktuell sein. Ich müsste morgen noch einmal schauen. Aber das letzte Update war vor ca. zwei Monaten. Die Entwicklung habe ich nicht auf dem Schirm. Deswegen muss ich morgen mal schauen.

Du hast also kein Problem mit den iOS7-Stylesheets im Safari-Browser auf iPad und iPhone?
Dann kann es ja nur an meiner Konstellation liegen.

[fhainz]

Nein, ich hab keine Probleme. Muss an deiner Konstellation liegen.

[FunkOdyssey]

Ich gebe auf. In allen anderen Browsern klappt das problemlos. Nur im Safari nicht. Schade.

[FunkOdyssey]

Ich habe jetzt viele Dinge ausprobiert und denke, die Ursache gefunden zu haben.

Ich habe dir roomIcons im FHEMWEB-Device entfernt und seitdem habe ich keine Ladeprobleme mehr.

Hilft das den Entwicklern evtl. bei der Lösungsfindung? Kann jemand evtl. nun auch den Fehler reproduzieren?

Mit folgenden Werten ist das Attribut gefüllt:

Code Auswählen Erweitern

Heizung:sani_heating Save.config:edit_save WC:scene_bathroom Diele:scene_hall Küche:scene_cooking HWR:scene_cubby Verbrauch:measure_power Wohnzimmer:scene_livingroom unused:message_garbage Automation:status_automatic CUL_HM:hm_lan CUL_WS:cul_868 Dachgeschoss:control_building_modern_s_og Erdgeschoss:control_building_modern_s_eg Events:status_automatic Server:it_server Outdoor:scene_day Plots:time_graph Büro:scene_office Umwelt:scene_day Wetter:temperature_humidity Test:unknown Unsorted:edit_sort Garten:scene_garden development:edit_paste logfiles:edit_copy Howto:unknown Everything:control_building_2_s_all Sicherheit:security Logfile:edit_paste Commandref:edit_collapse Remote doc:it_internet Edit files:edit_open Select style:hue_bridge Event monitor:control_return Jalousien:fts_window_2w Logs:time_note Beleuchtung:light_light Residents:people_sensor

[fhainz]

Ich muss dich leider enttäuschen, bei mir ist auch das roomIcons Attribut gesetzt und ich hab keine Probleme. Es gibt nicht mal mehr alle Räume wie ich gerade sehe.

Code Auswählen Erweitern

attr WEB roomIcons Save.config:save2 Dashboard:dashboard Wohnzimmer:scene_livingroom Fernbedienung:remote Kueche:scene_cooking Wohnung:control_building_empty Temperaturen:temp_temperature Plots:time_graph Einstellungen:gear Logs:time_note FS20:message_socket HomeMatic:hm_lan Notifys:edit_sort SamsungTV:it_television Strom:measure_current Parameter:parameter Logs:edit_copy Geofancy:location2 Timer:time_timer Unsorted:secur_encoding Everything:control_building_2_s_all Logfile:edit_paste Howto:edit_sort Commandref:edit_copy Remote.doc:edit_copy Edit.files:time_note Select.style:css Event.monitor:edit_sort RaspiVT:RPi Update:system_fhem_update Neustart:system_fhem_reboot Wetter:weather_cloudy_light Multimedia:audio_play Persönliches:message_medicine Alarms:audio_volume_high

Edit:
Ich würde dir raten dein Raspi mal komplett neu aufzusetzen. Bin mir (fast) sicher das es dann klappt

[setstate]

Ich habe ein ähnliches Phänomen. Das FHEM Tabel UI zeigt auf meinem iPhone (iOS 8.3) bei jedem Refresh ein anderes Aussehen. Vermutlich wird das CSS File nicht vollständig geladen, jedesmal fehlt etwas anderes. Die selbe Seite auf dem iPad, Android, MacBook zeigt keinerlei Probleme. Ich vermute ein TimeOut Problem beim HTTPSRV. Ich bin noch am Forschen ...
Die gleiche Seite auf einem anderen Webserver auf dem gleichen NAS, wo FHEM läuft, gehostet, zeigt auf dem iPhone auch kein Fehler. Es muss daran liegen, wie FHEM HTTPSRV die Seite überträgt.
Leider kann ich kein Safari 6 oder höher installieren, damit man mit den Entwickler-Tools die Fehler vom iOS Safari debuggen kann.
Kann das mal jemand probieren?

[fhainz]

Habt ihr das Problem nur mit dem ios7 style?

[FunkOdyssey]

Vorab: es hat nicht - wie von mir oben geschrieben - unbedingt etwas mit den Roomicons zu tun, sondern mit der Gesamtzahl der Icons. Es scheint so, als würde das CSS sporadisch bei vielen Icons nicht geladen werden.

Jetzt probiere ich es gerade mit einem anderen Skin. Erster Eindruck: keine Probleme. Aber das iOS6 Skin hat dafür zig andere Macken.

Ich melde mich wieder.

[FunkOdyssey]

So. Die anfängliche Euphorie ist weg. Aber es freut mich auch irgendwie. Fakt ist, dass das Problem auch bei den anderen Styles auftritt. Ehrlich gesagt hätte ich das auch gehofft. Ich würde zwar lieber das CSS debuggen (bin u.a. firm in Sachen Webdesign), aber das Problem ist ja eher, dass das Stylesheet überhaupt nicht übertragen wird. So, als würde man im Desktop-Browser den Stil auf reines HTML umschalten.

Es gab vor längerer Zeit doch einen Thread, indem es um Ladeprobleme auf iDevices ging. Und zwar speziell im Safari-Browser. Afaik habe ich seitdem "meine" Probleme. Auf allen iOS-Geräten.

Darin kenne ich mich nicht aus, aber ich tippe Richtung HTTP-Request & Co.

Ich habe auch mittlerweile meinen zweiten RasPi in Betrieb genommen. Aber ich werde das gerne erneut testen.

[setstate]

Mit dem FHEMWEB habe ich kein Problem, nur bei eigenen Seiten, die per HTTPSRV bereitgestellt werden.
Und nur auf iOS 8.3, nicht auf iOS7, dort läuft es ohne Probleme.

Leider kann ich es nicht debuggen, wie hier http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari beschrieben. Mein MacBook ist zu alt, ich kann nur bis Safari 5.

[FunkOdyssey]

Ähm. Ich habe natürlich kein iOS7 mehr im Einsatz, sondern auch iOS 8.3.
Das Style heißt halt nur "iOS7".

[tomster]

Ich habe ein ähnliches Phänomen. Das FHEM Tabel UI zeigt auf meinem iPhone (iOS 8.3) bei jedem Refresh ein anderes Aussehen. Vermutlich wird das CSS File nicht vollständig geladen, jedesmal fehlt etwas anderes. Die selbe Seite auf dem iPad, Android, MacBook zeigt keinerlei Probleme. Ich vermute ein TimeOut Problem beim HTTPSRV. Ich bin noch am Forschen ...
Die gleiche Seite auf einem anderen Webserver auf dem gleichen NAS, wo FHEM läuft, gehostet, zeigt auf dem iPhone auch kein Fehler. Es muss daran liegen, wie FHEM HTTPSRV die Seite überträgt.
Leider kann ich kein Safari 6 oder höher installieren, damit man mit den Entwickler-Tools die Fehler vom iOS Safari debuggen kann.
Kann das mal jemand probieren?

Ich hab Mal versucht, ob man daran vielleicht etwas ändern kann, wenn man den "App-Cache" bemüht um Teile des UIs aus dem Cache und nicht von FHEM selbst lädt.
Siehe da, es scheint zu funktionieren! Zumindest hatte ich bei ca. 15-20 Refreshs keinen einzigen CSS-Glitch...
Ich hab den werten Herrn "App-Cache" aber gerade erst kennengelernt, also seht mir bitte nach, wenn man es eventuell auch einfacher hinbekommen könnte.

Ich bitte Euch folgende Code-Schnipsel (sind nicht viele) bei euch einzubauen und ebenfalls fleissig zu Testen. Bei meinem Leih-iPad konnte es o.g. Phänomen beseitigen und auch der Firefox am PC scheint kein Problem damit zu haben. Mich würde aber auch interessieren, ob vielleicht andere Systeme (Android, Opera, etc.) einen Fehler auswerfen.

Hier nun kurz was ich gemacht habe:

Zunächst muss eine Datei (ich nenne sie "ui.appcache" im Homeverzeichnis vom UI (/opt/fhem/www/tablet/ui.appcache) angelegt werden. Auf Dateirechte achten!
In diese kommt dann folgender Inhalt:

Code Auswählen Erweitern


CACHE MANIFEST

CACHE:
css/fhem-tablet-ui.css
fonts/*
js/*
NETWORK:
*
http://*
https://*
FALLBACK:
css/fhem-tbalet-ui.css
fonts/*


Dann in der index.html diesen Teil (ganz oben):

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>


durch den nachfolgenden ersetzen:

Code Auswählen Erweitern


<!DOCTYPE html>
<html manifest="ui.appcache">
<head>


Mehr ist es nicht. Feedback (auch von Leuten, die sich wirklich mit dem App-Cache auskennen, ausdrücklich erwünscht!

[rudolfkoenig]

Mit der MANIFEST sagt man dem Browser, welche Dateien er explizit laden soll (auch wenn sie noch nicht verwendet wurden), und welche nicht cachen darf. Man kann damit Offline-Web-Anwendungen bauen, wo der Server nicht mehr erreichbar sein muss.

Die Dateien aus dem App-Cache werden beim Server nicht nachgefragt (Shift-Ctrl-R hilft nicht), d.h. ein Neuladen dieser Dateien ist muehsam (cache loeschen), oder erfordert Programmhilfe.

Laedt das FHEM Tablet UI seine Daten ueber FHEMWEB? Ich vermute immer noch, das im Zusammenhang mit iOS FHEMWEB sich noch nicht perfekt verhaelt, weiss aber nicht genau, wieso/wo.

[nesges]

Laedt das FHEM Tablet UI seine Daten ueber FHEMWEB?

Die CSS werden standardmässig per HTTPSRV aus www/tablet geholt:

Code Auswählen Erweitern

define tablet_ui HTTPSRV tablet/ ./www/tablet Tablet Frontend
(jquery.min.js und cordova-2.3.0.js werden idR per script-Tag direkt aus pgm geladen.)

Readings werden per list über FHEMWEB geholt.

[felix.steinbeis]

Hallo zusammen,

gibt es inzwischen eine Lösung?

Ich habe auch das Problem, dass auf dem iPad unter Safari manchmal die CSS nicht vollständig geladen werden.

Das Betrifft sowohl das FHEMWEB default CSS als auch Tablet UI CSS.

Viele Grüße
Felix

[FunkOdyssey]

Danke. Das gibt ein gutes Gefühl nicht alleine zu sein.
Auch nach einer Neuinstallation des RasPi und von Fhem bleibt das Problem weiterhin vorhanden.

[FunkOdyssey]

Die Probleme sind seit einem Update (siehe hier) verschwunden.