jQuery UI draggable handles are very small in IE9

Question

I've been trying to make a nice editable polygon in a canvas, using jQuery UI to grab the vertices and move them about. This has been working fine on Chrome, Firefox and Safari, it just doesn't quite work on IE9.

http://jsfiddle.net/EveryoneMustWin/qNdCw/

CSS

.vertex {width:50px; height:50px; border:0px dotted red; position:absolute; display:none; z-index:0;}

#vertexcontainer .vertex {display:block;}

.vertex div.handle {width:40px; height:40px; position:relative; left:-20px; top:-20px; border:1px solid red; border-radius:20px;z-index:1; opacity:0.5;}

.currenthandle {width:40px; height:40px; border:1px solid red; position:absolute; background-color:#fc0;}

Code

$( ".vertex" ).draggable({
    stack: "div",
    snap: true,
    handle: "div.handle",
    start: function() {
        $(".currenthandle").removeClass("currenthandle");
        $(this).children("div.handle").addClass("currenthandle");
    },
    drag: function() {
        drawPoly();
    },
    stop: function() {
        drawPoly();
    }
});

The draggable area of the vertex handles seems to be very small, you can select it by clicking around the border of the handle if you're lucky. It is possible to drag them around fine, once you've selected the vertex, so it isn't a problem with the core draggable behaviour.

My guess is that jQuery UI is setting the element.style of ".vertex div.handle" to an inappropriate setting. Or is it an IE9 problem with CSS3? I'm not very good at investigating these kinds of problems in IE, without an element inspector. Thanks for any tips!

Answer 1

The problem AFAICT is that IE ignores mouse clicks on element parts which have no "contents" that are clickable. In this case, you can add a defined background-color and magically IE is ok with it:

.vertex div.handle {
    width:40px; 
    height:40px; 
    position:relative; 
    left:-20px; 
    top:-20px; 
    border:5px solid red; 
    border-radius:20px;
    z-index:1; 
    opacity:0.5; 
    background-color: #ddd;
}

http://jsfiddle.net/qNdCw/6/

I think you may be able to "trick" it with a transparent image set to the background, if you don't like the opacity on the background.