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

ZK flex calculation rounding error on subpx with chrome with zoom

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Normal
    • Resolution: Fixed
    • Affects Version/s: 8.6.0
    • Fix Version/s: 8.6.1
    • Component/s: None
    • Security Level: Jimmy
    • Labels:
      None
    • Environment:

      reproduced on Chrome Version 70.0.3538.77 (Official Build) (64-bit), window 10

    • gh.sprint.customfield.default.name:
      ZK 8.6.1 S1

      Description

      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

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  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