Opened 13 years ago
Closed 9 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 10 years ago by
| Milestone: | TBD → 2.0.0 |
|---|
comment:2 Changed 10 years ago by
| Status: | new → open |
|---|---|
| Summary: | Draggable Issue in IE7 and Earlier → Draggable: overconstrained image inside overflow:auto div doesn't clip properly |
comment:3 Changed 9 years ago by
| Resolution: | → wontfix |
|---|---|
| Status: | open → closed |
We're no longer landing bug fixes for IE7 and will fully drop support soon.
Confirmed: http://jsfiddle.net/GcLfj/2/embedded/result/