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

slow hover style in bigger listboxes (IE11)

XMLWordPrintable

    • None

      Steps to Reproduce

      run the attached example in IE11 and move the mouse over the rows
      observe the hover style

      Actual Result

      the row hover style will be very slow and lag behind the mouse

      Expected Result

      instant style updates

      Root Cause

      inefficient (in IE11) CSS styles cause a CSS reflow on the whole listbox whenever the mouse moves (described here "Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)")

      ZK uses this combination of the CSS Adjacent Sibling operator '+' and :hover pseudo class for combo widgets such as combobox/datebox ... in this less file
      https://github.com/zkoss/zk/blob/master/zul/src/archive/web/js/zul/inp/less/combo.less#L60-L67
      resulting in css rules like this

      input[disabled]+.z-combobox-button:hover
      

      which can be replaced by rules following this pattern

      .z-combobox-disabled>.z-combobox-button:hover,
      

      the '>' selector doesn't cause the performance problem in IE11

      Workaround (based on the 7.0.8 stylesheet)

      to replace the original styles for combowidgets put the attachement combo.css.dsp into

      /WEB-INF/classes/web/js/zul/inp/css/combo.css.dsp
      

            wenninghsu wenninghsu
            cor3000 cor3000
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 6 hours
                6h