Webapplikation GWT mit Firefox 63 völlig zerrissen

    Sehr geehrte Frau Kurde

    ausser uns beiden scheint im Web niemand diese Layout-Problem zu haben, so ist es nicht verwunderlich, dass es kein Thema ist.
    Hatte heute gehofft, dass mit dem neusten Update Firefox 63.0.3 das Problem zum verschwinden kommt.
    Die bisherige Analyse im Brwoser bringt wenig, da ja vom GWT-Compiler der ganze HTML-Code aus den Java-Klassen und XML-Files in JavaScript übersetzt wird, und weil man dann in Firefox die Klassen und IDs usw. nicht mehr wieder erkennt.

    Bsp: Div eines Windows, dessen Inhalt einfach unten über die Bgrenzung hinausschreibt, und dessen Ruler nicht mehr funktioniert unter Firefox 63.
    <div id="isc_RD" eventproxy="isc_OID_472_body" class="gridBody" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_OID_472_body,true);" onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_OID_472_body,true);" tabindex="12531" style="position: absolute; left: 0px; top: 23px; width: 606px; height: 180px; z-index: 206630; box-sizing: border-box; cursor: default;" onscroll="return isc_OID_472_body.$lh()"><div id="isc_RE" eventproxy="isc_OID_472_body" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:206630;CURSOR:default;"><div style="position:relative;z-index:1000;"><div .....................

    Das ist für mich dann nicht nachvollziehbar, warum bis Firefox 62 der Code unserer seit einem Jahr unveränderten Webapplikation immer funktioniert hatte, und jetzt nicht mehr.

    Mir bleibt leider nicht anderes übrig, als unseren Kunden Chrom und Edge zu empfehlen.

    Mit freundlichen Grüssen
    Werner Steiner

    Also das Layout-Problem ist gelöst,
    auch ohne dass die ganze Applikation neu geschrieben werden muss:

    layout.css.overflow.moz-scrollbars.enabled;true

    ist die korrekte Einstellung unter about:config, seit Firefox 63 wird diese Einstellung offenbar standardmässig auf "false" gesetzt.

    Unter: https://developer.mozilla.org/en-US/docs/Moz…fox/Releases/63
    Firefox 63 for developers ... habe ich diesbezüglich keinen Hinweis gefunden.

    Frau Julia Kurde hat offenbar in stackoverflow einen entsprechenden Hinweis gefunden.
    Herzlichen Dank für die rasche Mitteilung.

    Für unsere User und für die User von Frau Kurde haben wir zwar bereits eine Anleitung geschrieben (mit Bildern), wie man via about:config die Einstellung "layout.css.overflow.moz-scrollbars.enabled;true" wieder herstellen kann, jedoch dürfte dies viele User überfordern, so dass eine Empfehlung für Chrom naheliegend ist.

    Warum Firefox diese Einstellung geändert hat? Hoffe die machen das wieder rückgängig, denn höchstwahrscheinlich gibt es noch einige Webapplikationen, welche Eigenschaften wie "layout.css.overflow.moz-scrollbars.enabled;true" nutzen möchten.

    Ob jetzt bei jeder neuen Firefox-Version diese Einstellung wieder überschrieben wird, muss ich im Auge behalten. Jedenfalls ist in meinem Profil in der Datei prefs.js jetzt das folgende auch eingetragen "layout.css.overflow.moz-scrollbars.enabled;true" und sollte damit eigentlich "permanent" so gespeichert sein.

    Freundliche Grüsse
    Werner Steiner

    Hallo,

    Danke für das Nachforschen und die Rückmeldung. Damit lässt sich natürlich nun viel mehr sagen. Die Option layout.css.overflow.moz-scrollbars.enabled wird definitiv entfernt werden und wurde nur als temporärer Schalter eingeführt, bis die Kompatibilitäts-Auswirkungen klar sind. Das eigentliche Problem ist, dass hier seitens Webseite etwas verwendet wird, was nicht den Webstandards entspricht. Es ist also ein Webseitenproblem und muss in jedem Fall mittelfristig seitens Webseite gelöst werden.

    Der Kompatibiltitäts-Hinweis dazu findet sich hier:
    https://www.fxsitecompat.com/en-CA/docs/201…e-been-dropped/

    Sehr geehrter Herr Hentzschel
    diese Eigenschaft mit Scroll-Bars umzugehen stammt aus einem benutzten Tool, um die GUI zu bauen: Smart-GWT. Ich nehme an, dass die verwendeten Methoden zur Zeit der Implementierung 100% den Webstandards entsprochen hatten, und mittlerweile veraltet sind. Genau: Ihr Link
    https://www.fxsitecompat.com/en-CA/docs/201…e-been-dropped/
    weist auf eine Seite mit Datum: August 14, 2018 | Categories: CSS

    Inhalt:
    The following non-standard, prefixed values for the overflow CSS property have been disabled by default in favour of the standard alternatives:
    OLD: moz-scrollbars-none
    Use overflow: hidden instead
    usw.
    Das Problem wird sein, dass ich die neue Schreibweise kaum in den bestehenden Code einbauen kann, weil dann der bestehende Compiler den neuen Standard nicht versteht.

    Freundliche Grüsse
    Werner Steiner

    moz-scrollbars-none war noch nie Teil eines Webstandards, sondern immer schon eine proprietäre Mozilla-Erweiterung des Standards. Die stattdessen zu verwendende Eigenschaft "overflow" wurde in Firefox 1, also vor 14 Jahren (!) bereits unterstützt. Von einer "neuen Schreibweise" oder einem "neuen Standard" kann also gewiss nicht die Rede sein.

    Die wichtige Erkenntnis ist in jedem Fall, dass der Code anzupassen ist, weil der Workaround über einen Schalter in about:config nur eine begrenzte Lebensdauer hat. Ich bin selbst Webentwickler und sage, dass das ganz klar in den Bereich Webseitenfehler fällt und nicht die Schuld von Mozilla ist. Webentwickler müssen sich an Standards halten. Punkt. Da gibt es keine Alternative. Die Verwendung von Nicht-Standards ist immer ein Risiko. Selbst wenn das viele Jahre lang funktioniert, bei Nicht-Standards gibt es keine Garantien, die Unterstützung kann jederzeit entfallen. Und ehrlich, 14 Jahre (mindestens!) sind ein extrem langer Zeitraum. ;)

    Sehr geehrter Herr Hentzschel
    habe heute in einer aktuellen Kopie unseres "Web-Application Codes" fogendes gesucht in Eclipse: "moz-scrollbars-", sowie "moz-scroll". Die File-Suche ergab in über 20'000 Dateien (10 Module) keinen Treffer. Ich habe dann die Suche mit wiederholt mit Notepad und Filesuche: Ebenfalls kein Trffer für "moz-scroll", hingegen wenn ich andere seltene Begriffe suche werden die sofort gefunden mit der verwendeten Suchmethode. Zusätzlich habe ich alle CSS-Dateien auf dem Server untersucht: nirgends kommt "moz-scroll" vor.
    Ich vermute daher, dass entweder "moz-scrollbars-" in einer verwendeten Bibliothek vorkommt, oder es handelt sich bei uns um ein anderes Problem, obwohl die Konfigurationsänderung in Firefox 63 "about:config": layout.css.overflow.moz-scrollbars.enabled;true ds Fehlverhalten der GUI zum verschwinden gebracht hatte.
    Mit freundlichen Grüssen
    Werner Steiner

    Sehr geehrter Herr Hentzschel

    heute habe ich mit dem Browser-Debugger nach -moz-scroll" gesucht: Es gab genau 3 Treffer im Projekt:
    2 Auftreten im File: 1.1.1 ISC_Core.js in folgnder Code-Zeile:
    {if(this.$ks){_1=this.$se?this.$nz:"-moz-scrollbars-none";this.$r3=true}else{_1=this.$nz}}else if(isc.Browser.isOpera&&this.overflow==isc.Canvas.VISIBLE){_1=this.$nz}else if(isc.Browser.isMoz){if(_4)this.$r3=true;else if(this.$ks){_1=this.$se?this.$nz:"-moz-scrollbars-none";this.$r3=true}}

    1 Auftreten in der Datei: ISC_RichTextEditor.js

    Herkunft der Dateien:
    * Isomorphic SmartClient
    * Version 8.0 (2010-03-03)

    Freundliche Grüsse
    Werner Steiner

    Ohje, ich sehe Browser-Sniffing… das heißt, je nachdem, welcher Browser genutzt wird, wird unterschiedlicher Code ausgeführt. Das ist in der Webentwicklung eines der schlimmsten Dinge, die man tun kann. Man sollte Code immer davon abhängig machen, ob Features vom verwendeten Browser unterstützt werden, niemals davon, welcher Browser genutzt wird. Sowas kann eine ganz eigene Kategorie von Problemen verursachen. :(

    Das ist exakt der gleiche Code wie in deinem Beitrag, aber in formatiert. Das löst so erstmal kein Problem, aber zumindest erkennt man so mal was vom Code, in der obigen Form ist das ja nicht lesbar. Leider fehlt ganz am Anfang offensichtlich eine Zeile, so dass nicht klar ist, unter welcher Bedingung der obere Teil ausgeführt wird.

    Hallo Sören

    Danke für Deine "Code-Layoutverbesserung".
    Habe nochmals nachgeschaut, etwas mehr Code unten. Die Zeile mit -moz-scrollb.. ist aber Zeile 2011......
    Denkst Du, wir sollten jetzt einfach mal versuchen, diese Codeschnipsel -moz-scrollbars-none zu ersetzen?

    FReundliche Grüsse
    Werner


    _14[54]=(_14[54]||"")+";padding-right:"+this.rightPadding+"px";_14[55]=(this.border?";BORDER:"+this.border:null);if(isc.Browser.isIE){_14[56]=(_9==null?null:";filter:progid:DXImageTransform.Microsoft.Alpha(opacity="+_9+")");if(this.$r9){_14[57]=";filter:progid:DXImageTransform.Microsoft.iris(irisStyle=circle)"}else{_14[57]=null}}else{if(_9!=null){_14[56]=(this.$65q?";-moz-opacity:":";opacity:")+_9}else{_14[56]=null}}
    _14[60]=_4;var _15=64;if(this.$kk()&&this._useNativeTabIndex){_14[64]=_2.$ry;_14[65]=this.$qn();_14[66]=_2.$rz;_14[67]=this.$qo();if(!this.isDisabled()){_14[68]=_2.$r0;isc.$bk(_14,this.getTabIndex(),69,5);if(this.accessKey!=null){_14[74]=_2.$r1;_14[75]=this.accessKey;_15=76}else _15=74;if(!this.showFocusOutline){if(!_2.$sa)_2.$sa=" hideFocus=true";_14[_15]=_2.$sa;_15+=1}}else _15=68}
    _14.length=_15;_14[_15]=this.$oa;if(_1)return _14;return _14.join(isc.emptyString)}
    return _13}
    );isc.evalBoundary;isc.B.push(isc.A.$r2=function(){if(!this.$sb()&&this.$sc==null){if(this.margin==null)return null;return isc.SB.concat(isc.semi,this.$om,this.margin,isc.px)}
    var _1=this.$sd(),_2=isc.SB.concat(isc.semi,this.$oi,_1.left,isc.px,isc.semi,this.$oj,_1.right,isc.px,isc.semi,this.$ok,_1.top,isc.px,isc.semi,this.$ol,_1.bottom,isc.px);return _2}
    ,isc.A.getTagEnd=function(){if(this.useClipDiv)return this.$oo;return this.$on}
    ,isc.A.$rw=function(){var _1=this.overflow;var _2=(this.overflow==isc.Canvas.SCROLL||this.overflow==isc.Canvas.AUTO),_3=_2&&this.showCustomScrollbars,_4=_2&&!this.showCustomScrollbars;if(this.overflow==isc.Canvas.HIDDEN||_3)
    {if(this.$ks){_1=this.$se?this.$nz:"-moz-scrollbars-none";this.$r3=true}else{_1=this.$nz}}else if(isc.Browser.isOpera&&this.overflow==isc.Canvas.VISIBLE){_1=this.$nz}else if(isc.Browser.isMoz){if(_4)this.$r3=true;else if(this.$ks){_1=this.$se?this.$nz:"-moz-scrollbars-none";this.$r3=true}}
    if(this.useClipDiv&&(this.overflow==isc.Canvas.CLIP_H||this.overflow==isc.Canvas.CLIP_V))
    {_1=this.$nz}
    return _1}

    Hallo zusammen
    Heute haben wir die 2 CSS-Dateien mit der veralteten Version von: -moz-scrollbars-none
    vom Server entfernt, respektive ersetzt mit den 2 korrigierten Dateien, welche:
    "overflow: hidden" beinhalten statt "-moz-scrollbars-none".

    Die CSS-Dateien stammen von:
    * Isomorphic SmartClient

    Die veraltete "Scrollbar-Methode" kommt 2Mal vor in Datei: ISC_Core.js
    ........
    {
    if (this.$ks) {
    _1 = this.$se ? this.$nz : "overflow: hidden";/* WS 181130 steht jetzt NEU «overflow: hidden» : statt OLD: «-moz-scrollbars-none» */
    this.$r3 = true
    } else {
    _1 = this.$nz
    }
    } else if (isc.Browser.isOpera && this.overflow == isc.Canvas.VISIBLE) {
    _1 = this.$nz
    } else if (isc.Browser.isMoz) {
    if (_4) this.$r3 = true;
    else if (this.$ks) {
    _1 = this.$se ? this.$nz : "overflow: hidden";/* WS 181130 steht jetzt NEU «overflow: hidden» : statt OLD: «-moz-scrollbars-none» */
    this.$r3 = true
    }
    }
    ......
    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    Die veraltete "Scrollbar-Methode" kommt 1Mal vor in Datei: ISC_RichTextEditor.js
    ........
    if (this.$22y()) {
    var _1;
    if (this.$ks) {
    _1="overflow: hidden";/* WS 181130 steht jetzt NEU «overflow: hidden» : statt OLD: «-moz-scrollbars-none» */
    this.$r3=true
    } else {
    _1=this.$nz
    }
    return _1}
    else return this.Super("$rw",arguments)
    ...........
    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

    Die so korrigierten Dateien wurden also vom Provider auf den Server kopiert mit folgendem Fazit:
    1) Edge und Chrom: GUI der GWT-Applikation sieht nach wie vor korrekt aus
    2) Firefox63: GUI trotz Korrekturen NICHT korrekt. Die Zeilen überlappen die Fenstergrenze, schreiben unten darüber hinaus. Der Browser Firefox kann mit dem veränderten js der Biliothek "Isomorphic SmartClient" nichts anfangen.
    "overflow: hidden" einzusetzen statt "-moz-scrollbars-none" ist daher noch nicht die Lösung, denn "overflow: hidden" wurde vom Browser nicht erkannt, obwohl jetzt in den beiden CSS korrekt enthalten.

    Ich weiss jetzt nicht, ob man die 2 Dateien ISC_Core.js und ISC_RichTextEditor.js soweit bringen kann, mit:
    "overflow: hidden"
    Die GUI korrekt darzustellen, so eben wie vorher mit «-moz-scrollbars-none».

    Wenn jemand eine Idee hätte, wäre grossartig.

    Freundliche Grüsse
    Werner Steiner

    PS: Meine damaligen Entwickler hatten " * Isomorphic SmartClient" damals verwendet, um rascher eine korrekte GUI zu bauen.