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
    • Component/s: ZK Client Engine
    • 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

          Activity

            People

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

              Dates

              Created:
              Updated:
              Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 2 days
                2d
                Remaining:
                Time Spent - 1 day Remaining Estimate - 1 day
                1d
                Logged:
                Time Spent - 1 day Remaining Estimate - 1 day
                1d