Skip to main content

Search and Top Navigation

#8596 closed bug (patcheswelcome)

Opened September 24, 2012 10:52PM UTC

Closed October 28, 2015 04:29PM UTC

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/

Attachments (0)
Change History (8)

Changed September 25, 2012 12:13AM UTC by Ivan Peters comment:1

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

Changed September 25, 2012 08:57PM UTC by scottgonzalez comment:2

component: ui.coreCSS Framework

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

Changed September 25, 2012 09:51PM UTC by Ivan Peters comment:3

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.

Changed October 11, 2012 02:12PM UTC by scottgonzalez comment:4

milestone: 1.9.01.10.0

Changed October 18, 2012 12:28PM UTC by mikesherov comment:5

status: newopen

Changed November 10, 2012 08:44PM UTC by mikesherov comment:6

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

Changed January 25, 2013 09:23PM UTC by tj.vantoll comment:7

milestone: 1.10.0none

Changed October 28, 2015 04:29PM UTC by scottgonzalez comment:8

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.