Opened 7 years ago

Closed 4 years ago

#8596 closed bug (patcheswelcome)

Mouseover a button can make container expand in IE

Reported by: Ivan Peters Owned by:
Priority: minor Milestone: none
Component: ui.css-framework Version: 1.8.23
Keywords: Cc:
Blocked by: Blocking:

Description

This is a strange one and I think most of the blame can be put on IE.

If you place a jQuery UI button inside an element that has overflow-x set to auto and has some overflow (i.e. the scrollbar is visible) then moving the mouse over the button will cause that container element to get bigger (but the scrollbar will stay put).

The same effect can also be achieved by clicking on an element (inside the scrollable element) that is a child of an element with a class of ui-widget.

In the second case (clicking on the child of a ui-widget) I have narrowed it down to this rule in the jQuery UI CSS:

.ui-widget :active { outline: none; }

It appears that manipulating the outline property is triggering a bug in the IE internal size calculations. I have, so far, been unable to narrow down the button hover scenario. I can remove the CSS and the problem is still there so it would appear to be something being done to it in the JavaScript.

This is an Internet Explorer issue only.

A JSFiddle demonstrating this is here: http://jsfiddle.net/IvanTheBearable/fP7vc/

Change History (8)

comment:1 Changed 7 years ago by Ivan Peters

The good news is that IE10 doesn't have this problem. So it is an IE9 (and possibly older) issue only.

comment:2 Changed 7 years ago by Scott González

Component: ui.coreCSS Framework

Assuming that CSS rule is the issue, then this should be fixed with #6757.

comment:3 Changed 7 years ago by Ivan Peters

The suggested fix for #6757 is this:

.ui-widget * { outline: none; }

This does indeed solve the "clicking on a child of a ui-widget" part of this issue. It doesn't fix the "mouseover on a button" part. In fact, I can completely remove all jQuery CSS from the test and the button will still have the mouseover issue.

comment:4 Changed 7 years ago by Scott González

Milestone: 1.9.01.10.0

comment:5 Changed 7 years ago by mikesherov

Status: newopen

comment:6 Changed 7 years ago by mikesherov

confirmed on latest for mouseover: http://jsfiddle.net/3X6Zs/

comment:7 Changed 7 years ago by tj.vantoll

Milestone: 1.10.0none

comment:8 Changed 4 years ago by Scott González

Resolution: patcheswelcome
Status: openclosed

Since IE 9 support is being dropped soon and there's no good fix that we've found, we're going to just let this one go.

Note: See TracTickets for help on using tickets.