#5050 closed bug (wontfix)

Opened January 07, 2010 08:40PM UTC

Closed February 19, 2014 07:31PM UTC

Draggable: overconstrained image inside overflow:auto div doesn't clip properly

Reported by: bobmc Owned by:
Priority: major Milestone: 2.0.0
Component: ui.draggable Version: 1.7.2
Keywords: container clipping overflow Cc:
Blocked by: Blocking:
Description

I'm attempting to make a page that allows panning of a large image

inside a smaller div using the mouse. I used the draggable interaction to achieve this effect. Here is a sample of the HTML:

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http:

www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<html>

<head>

<style>

#div1

{

border: solid 1px Black;

width: 635px;

height: 100%;

overflow:auto;

cursor:move;

}

</style>

</head>

<body>

<script type="text/javascript" src="http://ajax.googleapis.com/

ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/

ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

$('#testImage').draggable({ revert: true, scroll:

true });

});

</script>

<div id="div1">

<img src="047692-0022-03-0000-100.jpg" name="testImage"

id="testImage">

</div>

</body>

</html>

You can substitute whatever image with a width larger than 635 pixels that you have handy.

In IE8 this works wonderfully. However, in IE7 the image is not

clipped by the boundaries of the div. This appears to be related to

the jQuery UI code, because if I comment out the "ready" script the

image is clipped correctly.

You can see this in action in IE8 using compatibility mode as well. Just add:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

to the <head> section to see the problem. Then comment out the call to init draggable to see the correct clipping.

Attachments (0)
Change History (3)

Changed October 11, 2012 09:07PM UTC by scottgonzalez comment:1

milestone: TBD → 2.0.0

Changed October 26, 2012 12:46AM UTC by mikesherov comment:2

status: new → open
summary: Draggable Issue in IE7 and Earlier → Draggable: overconstrained image inside overflow:auto div doesn't clip properly

Confirmed: http://jsfiddle.net/GcLfj/2/embedded/result/

Changed February 19, 2014 07:31PM UTC by scottgonzalez comment:3

resolution: → wontfix
status: open → closed

We're no longer landing bug fixes for IE7 and will fully drop support soon.