-
Bug
-
Resolution: Fixed
-
Normal
-
7.0.8, 8.0.3
-
Security Level: Jimmy
-
IE11
-
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
- relates to
-
ZK-4153 additional slow hover styles in bigger listboxes (IE11)
- Closed