Opened 10 years ago

Closed 6 years ago

#5050 closed bug (wontfix)

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.

Change History (3)

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

Milestone: TBD → 2.0.0

comment:2 Changed 7 years ago by mikesherov

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/

comment:3 Changed 6 years ago by Scott González

Resolution: → wontfix
Status: open → closed

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

Note: See TracTickets for help on using tickets.