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

css reflows caused by old fix for IE8

    XMLWordPrintable

    Details

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

      potentially all browsers besides IE8

      Description

      retest / consider removing the implementation of ZK-1885 for modern browsers

      consider the simple example:

      <zk>
      	<div vflex="1" width="100%" style="border: 1px solid red;">
      		<vlayout vflex="1" hflex="1">
      			<forEach begin="1" end="5" varStatus="outer">
      				<hlayout vflex="1" hflex="1">
      					<forEach begin="1" end="10" varStatus="inner">
      						<div hflex="1">
      							${outer.index}-${inner.index}
      						</div>
      					</forEach>
      				</hlayout>
      			</forEach>
      		</vlayout>
      	</div>
      </zk>
      

      manually counting the "forced reflow" warnings in chrome developer tools resulted in ~150 warnings

      more complex examples easily result in 1000s of reflows = bad performance

      Where possible first collect read styles of multiple/all affected widgets, then update styles (only if needed!) in a separate loop.
      Avoid alternating between read/update/read/update styles
      Most prominent example in zk.Widget.resetSize

      https://github.com/zkoss/zk/blob/master/zk/src/archive/web/js/zk/widget.js#L3367-L3372

      Here n.scrollTop/n.ScrollLeft trigger a css reflow followed by an immediate style update.
      The next call to resetSize will reflow/update again

      A nice collection of what might cause a reflow is summarized here: What forces layout / reflow

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              rudyhuang rudyhuang
              Reporter:
              cor3000 cor3000
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 2 days
                  2d
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 days
                  2d