Wenn ich diese Seite aufrufe:
Dann sieht das so aus:
Der Inhalt ist kurz sichtbar, wird dann aber in den Hintergrund ausgeblendet, so daß man kaum etwas erkennen kann.
Getestet mit Mozilla Firefox 68.12.0esr (64-Bit) und Google Chrome Version 85.0.4183.102 unter Linux.
AdBlocker sind aus.
Kann ich bestätigen. Ist mit drei versch. Browsern (Linux) so.
Damit geht es: Chromium Version 83.0.4103.61 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
Oder wenn man in Firefox beim Laden der Seite die ESC-Taste drückt, bevor alles verblasst.
Das ist die React re-hydration. Wenn man Escape drückt würde das das Laden der interactiven Anteile der Seite verhindern und man hat danach nur eine statische HTML Seite.
Aber wenn man den Browser frei nachladen lässt sollte es unabhängig vom Browser Hersteller funktionieren:
Ich hindere den Browser nicht daran etwas nachzuladen.
Die Seite sollte so angepasst werden, daß nicht ich als Anwender speziell reagieren muß um die Seite sehen zu können, sondern daß diese mit allen aktuellen Browsern funktioniert. Im Moment ist das nicht so.
Danke!
Das System aus dem Screenshot (oben) wurde nicht modifiziert. Es ist jeweils die aktuellste Version von Chromium (v85), Firefox (v80) und Vivaldi (ebenfalls basierend auf aktuellster Chromium Version) installiert. Alle Browser laufen auf Standardeinstellungen.
Wenn die Seite erst kurz richtig angezeigt wird und danach Fehler aufweist, wird der Javascript Part der Seite nicht geladen oder es kann auch sein dass Teile des CSS fehlen. Dazu müsste aber was in der Browser Konsole stehen.
Ältere Opera Version → geht.
Aktueller FF und aktueler Chromium → geht „nicht“.
Wie ich eben feststelle, geht es aber nach ein- oder zwei Mal reload der Seite 
Steht da was in der Browser Konsole ?
Beim Wiki kommt zuerst eine statische HTML Version der Seite. Danach wird dann ein wird dann ein größerer Blob an Javascript Code geladen, der die eigentliche Web App ist.
Wie schaut es aus wenn man über Chromium die Web App installiert?
https://www.howtogeek.com/fyi/how-to-install-progressive-web-apps-pwas-in-chrome/
Sobald die Seite vollständig geladen ist wird einem bei Chromium die Option gegeben die App permanent zu installieren. Der Javascript Part der Seite wird dann nicht mehr immer neu heruntergeladen und man kann die App direkt wie eine lokal installierte Software starten - ohne über Chrome gehen zu müssen (Chromium läuft aber natürlich weiterhin „headless“ im Hintergrund).
Browser Konsole:
[Exception… „Component returned failure code: 0x80004001 (NS_ERROR_NOT_IMPLEMENTED) [nsIAppStartup.secondsSinceLastOSRestart]“ nsresult: „0x80004001 (NS_ERROR_NOT_IMPLEMENTED)“ location: „JS frame :: resource:///modules/BrowserGlue.jsm :: _collectStartupConditionsTelemetry :: line 1671“ data: no] BrowserGlue.jsm:1671:9
Sicherheitsfehler: Inhalt auf moz-extension://56e28e0a-fa40-49f0-8c1e-74d44f15690d/ darf keine Daten von blob:null/ff6e0abf-a15e-4d66-8b10-c7f184aa48b6 laden.
Unknown category for SetEventRecordingEnabled: fxmonitor
a11y.sitezoom - Unknown scalar.
Successfully compiled asm.js code (total compilation time 1ms) adblockplus.js
XML-Verarbeitungsfehler: Ungeschlossenes Token
Adresse: moz-extension://883a8589-de7c-4a11-91b2-49c6cdad867e/background.html
Zeile Nr. 1, Spalte 1: background.html:1:1
Error: frame.state is undefined undefined
Unknown localization message weh_prefs_label_downloadcompletedelay main.js:1
Unknown localization message weh_prefs_description_downloadcompletedelay main.js:1
Unknown localization message weh_prefs_label_tbvwsgrabdelay main.js:1
Unknown localization message weh_prefs_description_tbvwsgrabdelay main.js:1
Unknown localization message weh_prefs_label_forcedcoappversion main.js:1
Unknown localization message weh_prefs_description_forcedcoappversion main.js:1
ExtensionError: No such native application net.downloadhelper.coapp ExtensionUtils.jsm:56:5
this.ports.get(…) is undefined ExtensionParent.jsm:364
In add-on {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}, attempting to use listener „notifications.onButtonClicked“, which is unimplemented. ExtensionParent.jsm:1031:13
injectedUserCss is undefined contentscript-start.js:108
Das Cookie „__cfduid“ wurde abgelehnt, weil es sich in einem seitenübergreifenden Kontext befindet und sein „SameSite“ auf „Lax“ oder „Strict“ gesetzt ist. path
[Exception… „Favicon at „https://wiki.instar.de/windows10/SplashScreen.scale-400.png“ is too large.“ nsresult: „0x80004005 (NS_ERROR_FAILURE)“ location: „JS frame :: resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 310“ data: no] FaviconLoader.jsm:310:28
Key key_application of menuitem Anwendung could not be found menu.js:292
Sicherheitsfehler: Inhalt auf moz-extension://56e28e0a-fa40-49f0-8c1e-74d44f15690d/ darf keine Daten von blob:null/dcc8fbcd-321c-41fa-83a8-b23d854293ad laden.
Promise resolved while context is inactive
preload.js:177
Promise rejected while context is inactive: sender.page is undefined
include.preload.js:533
Promise resolved while context is inactive
polyfill.js:228
Promise rejected while context is inactive: page is undefined
Ich habe die Fehlermeldungen mal gesucht - das scheinen alle Firefox Interne Meldungen zu sein. Bzw. Extensions zu betreffen. Hier sind zwei Firefox Issues die ähnliche Fehlermeldungen werfen:
Ich kann es momentan nichts zuordnen was beim Laden des Wikis auftreten könnte.
Ist das Firefox 80+ ? Oder noch was älteres?
Edit: Ausnahme ist natürlich die Zeile:
[Exception… „Favicon at „https://wiki.instar.de/windows10/SplashScreen.scale-400.png“ is too
Dieser Splashscreen sollte nicht als FavIcon identifiziert werden, sondern ist nur dafür da wenn man die App unter Windows installiert - beim Öffnen der App wird dann kurz diese Datei angezeigt. Ich glaube unter LINUX wird aber auch die gleiche Datei verwendet. Es ist aber auf jeden Fall nicht das FavIcon.
Hier FF 80.0.1
Mal alle Erweiterungen deaktiviert -> keine Änderung.
Auf meinem Arch Linux Laptop kann ich es leider nicht nachstellen. Ich habe deshalb gerade mal einen Kollegen gefragt der Ubuntu + FireFox nutzt.
Er sagt das er in langsamen Netzwerken teilweise etwas warten muß bis es vollständig geladen ist - ich gehe davon aus dass dies nach einem Wiki Update passiert (wenn man den kompletten App Code noch mal neu runterladen muß).
Aber wenn es erstmal da ist läuft es auch dort ohne Probleme.
Wenn man häufiger im Wiki unterwegs ist, würde ich empfehlen die WebApp über den Browser zu installieren. Einmal runtergeladen hat man die dann immer parat. Der Code würde sich dann automatisch aktualisieren, wenn es ein Update online gibt. Ich habe da schon mal gesehen, dass das CSS kurz komische Sachen macht. Das passiert wenn das CSS aktualisiert wurde aber das HTML aber noch auf dem alten Stand im Browser Cache liegt. Ein Neuladen der Seite behebt dann aber den Fehler.
Die Fehlermeldungen aus der Browser Konsole kann ich momentan keinem Prozess zuordnen der beim Laden des Wikis eine Rolle spielt 
Hier der Ubuntu-Firefox Ausdruck, falls es weiterhilft. Der Fehler liegt sicher daran, dass Skriptcode von Google Analytics eingebunden wurde. 
NodeList [ html
]
Unknown pseudo-class or pseudo-element ‘-moz-scrollbar’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:1:8273
Unknown property ‘speak’. Declaration dropped. MQTT_vs_HTTP_API:12:784
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. MQTT_vs_HTTP_API:12:956
Error in parsing value for ‘cursor’. Declaration dropped. MQTT_vs_HTTP_API:12:3947
Unknown property ‘speak’. Declaration dropped. MQTT_vs_HTTP_API:12:37099
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. MQTT_vs_HTTP_API:12:37251
Unknown pseudo-class or pseudo-element ‘-webkit-full-screen’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:12:41201
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. MQTT_vs_HTTP_API:12:7319
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. MQTT_vs_HTTP_API:12:7354
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. MQTT_vs_HTTP_API:12:7819
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. MQTT_vs_HTTP_API:12:7854
Error in parsing value for ‘min-height’. Declaration dropped. MQTT_vs_HTTP_API:12:33547
Error in parsing value for ‘overflow’. Declaration dropped. MQTT_vs_HTTP_API:12:34557
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:12:41361
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:12:41538
Unknown pseudo-class or pseudo-element ‘-webkit-autofill’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:12:41910
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:12:42349
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:12:42462
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:12:42805
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:12:42916
Loading failed for the with source “https://www.google-analytics.com/analytics.js”. MQTT_vs_HTTP_API:1:1
Error in parsing value for ‘overflow’. Declaration dropped. 2 MQTT_vs_HTTP_API
Error in parsing value for ‘min-height’. Declaration dropped. MQTT_vs_HTTP_API:7:15
Error in parsing value for ‘overflow’. Declaration dropped. MQTT_vs_HTTP_API:93:13
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. MQTT_vs_HTTP_API:5:27
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. MQTT_vs_HTTP_API:6:29
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. MQTT_vs_HTTP_API:5:27
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. MQTT_vs_HTTP_API:6:29
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:57:21
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:62:21
Unknown pseudo-class or pseudo-element ‘-webkit-autofill’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:79:21
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:89:74
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:92:74
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:101:80
Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. MQTT_vs_HTTP_API:104:80
Error in parsing value for ‘animation’. Declaration dropped. MQTT_vs_HTTP_API
Error in parsing value for ‘animation’. Declaration dropped. MQTT_vs_HTTP_API
Error in parsing value for ‘animation’. Declaration dropped. MQTT_vs_HTTP_API
Error in parsing value for ‘animation’. Declaration dropped. MQTT_vs_HTTP_API
Error in parsing value for ‘animation’. Declaration dropped. MQTT_vs_HTTP_API
Error in parsing value for ‘animation’. Declaration dropped. MQTT_vs_HTTP_API
Hey,
das sind alles Stilklassen die spezifisch für ein anderes Betriebsystem bzw. einen anderen Browser sind. Da sich Browserhersteller nicht einigen können hat man verschiedene Namen für die gleiche Funktion. Dafür gibt es Programme die das „normale“, nicht browser-spezifische, CSS nehmen und dort dann alle browser-spezifische Varianten einfügt die es so gibt. Der Browser wirft dann alles was er nicht kennt als Unknown Property raus. Oder beschwert sich weil er den Wert nicht parsen konnte. Das macht aber nichts, weil direkt darunter dann die CSS Zeile steht die für diesen Browser relevant ist.
Wenn man die Analytik blockiert läuft die Anfrage in ein Timeout, was den Ladevorgang der Seite verlangsamen kann. Cleverer ist es, die Domäne lokal auf localhost umzuleiten. Dann bekommt der Browser sofort ein 404 zurück und läuft weiter durch den Code. Also einfach einen Eintrag in die Host Datei machen und Problem gelöst.
Habe es selber noch nicht probiert - aber ich meine das ist auch was zum Beispiel Pi-hole macht. Damit kann man den gesamten Traffic im LAN filtern und somit dann auch z.B. Handy alles blocken was man nicht braucht.
Ginge auch mit dnsmasq und Umleiten der entsprechenden Anfrage auf localhost.
Unter Windows war es immer die Hosts-Datei.
Nebenbei, es ist auch kein Problem mit Linux.
In meinem virtuellen Win stellt sich das mit FF und Chrom genau so dar.
Wenn es Browser + Betriebssystem übergreifend ist, wird es wohl eine Einstellung oder ein Addon sein. Allerdings dass die Seite nach 2-3 mal Neuladen plötzlich da ist, spricht eher dafür das sie einfach zu langsam runterlädt. Eventuell ist da was blockiert und wartet auf ein Timeout.
Ich schrieb doch schon, dass ich mit deaktivierten AddOns probiert hatte -> keine Änderung.
Und ich hatte die Seite auch minutenlang stehen gelassen. Da läd nix nach.
Speziell diese eine Seite hat eine Macke. Alles andere im Wiki geht ja.
Hallo und danke für die Tests.
Ich habe jetzt auch nochmal ausprobiert:
Linux Firefox 81.0 64-bit
Keine Addons, neues FF Profil, bzw. neuer Benutzeraccount
DNS Filter deaktiviert: 8.8.8.8 wird benutzt
Problem bleibt, und zwar auch nur bei dieser Seite.
Kannst du eventuell einmal probieren nicht direkt auf die Seite zu gehen, sondern dich von der Startseite dahin durchzuklicken?
Man kann es tatsächlich provozieren, dass da was bei CSS falsch geladen wird. Wenn man allerdings einen internen Wiki Link verwendet, um dort hinzukommen, wird automatisch das richtige CSS verwendet.
Wenn der ServiceWorker der Seite installiert ist, reicht es schon einen Link zu klicken, um von der Seite runterzukommen und danach „Zurück“ drücken um wieder auf die Seite zu gehen.
Beim Firefox kann man die Installations des ServiceWorkers scheinbar verhindern. Oder zumindest wird er mir nicht angezeigt. Dort muß dann wirklich auf einen Link gedrückt haben um ans Ziel zu kommen.
Ich habe eine Vermutung was das verursachen könnte. Aber muß ich mir noch genauer anschauen. Als Work-around sollte das oben gesagte aber schon mal laufen.