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

ZK flex calculation rounding error on subpx with chrome with zoom

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 8.6.1
    • 8.6.0
    • None
    • Security Level: Jimmy
    • None
    • reproduced on Chrome Version 70.0.3538.77 (Official Build) (64-bit), window 10

    • ZK 8.6.1 S1
    • None

      Steps to Reproduce

      run fiddle in plain page mode (run, then click the window button on the top right corner)
      http://zkfiddle.org/sample/1huv39q/1-ZK-chrome-zoom-vflex
      open developper tools;
      set zoom to 125%;
      reload the window;

      Current Result

      Uncaught RangeError: Maximum call stack size exceeded
          at setHghForVflexChild (zk.wpd:27657)
          at Object.fixFlex (zk.wpd:27665)
          at Object.fixFlex (zk.wpd:27704)
          at Object.fixFlex (zk.wpd:27704)
          at Object.fixFlex (zk.wpd:27704)
          at Object.fixFlex (zk.wpd:27704)
          at Object.fixFlex (zk.wpd:27704)
          at Object.fixFlex (zk.wpd:27704)
          at Object.fixFlex (zk.wpd:27704)
          at Object.fixFlex (zk.wpd:27704)
      

      Expected Result

      not that

      Debug Info

      To trigger this error, the following conditions are required:
      A container (div) with the overflow auto style
      Multiple childs in this div, one of them using flexing, the others having a non-integer height in pixels that adds to at least 1px more than their rounded individual height do. For example, considering the set of values:

      {100.6, 99.4, 99.4}

      will add to 198.4 and round to 198, but the sum of their rounded values

      {101,99,99}

      will be 199.

      This will cause the flexing calculator to oscillate between two states

      {100.6, 99.4, 1, 99.4}

      with a scrollbar and

      {100.6,99.4, 0, 99.4}

      with no scollbar.
      As an extra complication, if Chome have a scrollbar visible on page body and on the container div at the same time and the browser have a non-100% zoom level, the rounded value returned by element.offsetHeight of the last div in the container is rounded up instead of down. This means that with both scrollbar visible, the approximation of the 2nd state is

      {101, 99, 1, 100}

      , which causes the flex calculator to assign a height of 0 to the flexing object.

      Root Cause

      chrome domNode.offsetHeight rounding is not well determined with zoom 125% and subpixel sizes

      Workaround

            CharlesQiu CharlesQiu
            MDuchemin MDuchemin
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 1 day
                1d
                Remaining:
                Time Spent - 6 hours Remaining Estimate - 2 hours
                2h
                Logged:
                Time Spent - 6 hours Remaining Estimate - 2 hours
                6h