Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-5159

Firefox Windows 11 scrollbar doesn't have height, cause missing scrollbar

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Major Major
    • 10.0.0, 9.6.3
    • 9.6.1, 9.6.2
    • None
    • Security Level: Jimmy

      Steps to Reproduce

      https://zkfiddle.org/sample/1pkv83a/1-FF-100-windows-11-scroll

       

      run on windows 11, with firefox 100

      OR

      run on ubuntu with firefox 99+

      Current Result

      No scrollbar

      Expected Result

      has scrollbar

      Debug Information

      zul.mesh.Frozen#bind_

      scrollbarWidth = jq.scrollbarWidth();  // equals zero in FF 100 with Windows 11

       

      FF on windows 11 implements "Windows 11 style" scrollbars floating over the page, instead of the classic scrollbar, cause calculation to return 0 instead of a valid scrollbar width.

      Workaround

      <script><![CDATA[ 
      	zk.afterLoad("zul.mesh", function () {
      	    var _xFrozen = {};
      	    zk.override(zul.mesh.Frozen.prototype, _xFrozen, {
      	    	bind_: function () {
      	    		this.$supers(zul.mesh.Frozen, 'bind_', arguments);
      	    		var p = this.parent,
      	    			body = p.$n('body'),
      	    			foot = p.$n('foot');
      
      	    		if (p._nativebar) {
      	    			//B70-ZK-2130: No need to reset when beforeSize, ZK-343 with native bar works fine too.
      	    			zWatch.listen({onSize: this});
      	    			var scroll = this.$n('scrollX'),
      	    				scrollbarWidth = jq.scrollbarWidth();
      	    			if(scrollbarWidth == 0){
      	    				scrollbarWidth = 12;
      	    			}
      	    			// ZK-2583: native IE bug, add 1px in scroll div's height for workaround
      	    			this.$n().style.height = this.$n('cave').style.height = this.$n('right').style.height = scroll.style.height
      	    				 = scroll.firstChild.style.height = jq.px0(zk.ie ? scrollbarWidth + 1 : scrollbarWidth);
      	    			p._currentLeft = 0;
      	    			this.domListen_(scroll, 'onScroll');
      
      	    			var head = p.$n('head');
      	    			if (head)
      	    				this.domListen_(head, 'onScroll', '_doHeadScroll');
      
      	    		} else {
      	    			// Bug ZK-2264
      	    			this._shallSyncScale = true;
      	    		}
      	    		// refix-ZK-3100455 : grid/listbox with frozen trigger "invalidate" should _syncFrozenNow
      	    		zWatch.listen({onResponse: this});
      	    		if (body)
      	    			jq(body).addClass('z-word-nowrap');
      	    		if (foot)
      	    			jq(foot).addClass('z-word-nowrap');
      	    	}
      	     });
      	});
      ]]></script>
      

      Resources

      https://techdows.com/2021/12/firefox-windows-11-overlay-scrollbar.html
      https://www.omgubuntu.co.uk/2022/04/mozilla-firefox-99-features-gtk-overlay-scrollbars
      https://connect.mozilla.org/t5/discussions/scrollbars-disappear-in-firefox-100/td-p/5433

            gordonhsu gordonhsu
            MDuchemin MDuchemin
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved: