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

css reflows caused by old fix for IE8

XMLWordPrintable

      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

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

              Created:
              Updated:
              Resolved:

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