Ticket #7233 (open bug)
Resizable: resizable handles fail to work in IE if transparent and content overlaps
| Reported by: | Bluff | Owned by: | rdworth |
|---|---|---|---|
| Priority: | minor | Milestone: | 2.0.0 |
| Component: | ui.resizable | Version: | 1.8.11 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
If I view the page below in IE8 on Microsoft Windows 7, I am unable to resize the div by dragging the bottom border. Exact software versions:
IE 8.0.7600.16385
Windows 7 Home Premium, Version 6.1 (Build 7600)
I have tried this on Linux, using Firefox and Chromium, and it works fine.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<link type="text/css"
href="ui/css/ui-lightness/jquery-ui-1.8.11.custom.css"
rel="stylesheet">
<style type="text/css">
.textbox {
width: 40ex;
height: 20ex;
border: thin solid;
overflow: hidden;
}
</style>
</head>
<body>
<div class="textbox">
</div>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript"
src="ui/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript">
$(
function () {
var lots_of_text = (new Array(1001)).join('aaaa bbbb\n');
$('.textbox').text(lots_of_text);
$('.textbox').resizable();
}
);
</script>
</body>
</html>
Change History
comment:2 Changed 2 years ago by rdworth
- Status changed from new to open
Source of this issue, as well as a workaround, is at http://haslayout.net/css/No-Transparency-Click-Bug . Best workaround is background-image:url(about:blank), confirmed at http://stackoverflow.com/questions/1663919/how-to-make-an-empty-anchor-tag-clickable-in-ie7 as well.
comment:3 Changed 2 years ago by rdworth
- Owner set to rdworth
- Status changed from open to assigned
- Summary changed from in IE8, text inside a resizable can prevent resizing to Resizable: resizable handles fail to work in IE if transparent and content overlaps
comment:4 Changed 2 years ago by Richard Worth
- Status changed from assigned to closed
- Resolution set to fixed
Resizable: Added a non-visible yet non-transparent (apparently) no-request background-image on resizable handles to work around an IE bug. Fixed #7233 - Resizable: resizable handles fail to work in IE if transparent and content overlaps
Changeset: 64f13b661a571806bdfb181d1ef511ac9e2771b3
comment:5 Changed 2 years ago by Richard Worth
Resizable: Added a non-visible yet non-transparent (apparently) no-request background-image on resizable handles to work around an IE bug. Fixed #7233 - Resizable: resizable handles fail to work in IE if transparent and content overlaps (cherry picked from commit 64f13b661a571806bdfb181d1ef511ac9e2771b3)
Changeset: 371f1a4ffd7533aa97353ca04ec7ca27b588c8ae
comment:8 Changed 2 years ago by rdworth
- Status changed from closed to reopened
- Resolution fixed deleted
Eric Pascarello wonders whether about:blank would screw up https sites. Just in case, and since it's shorter and works just as well, let's use
background-image:url(data:)
comment:9 Changed 2 years ago by Richard Worth
- Status changed from reopened to closed
- Resolution set to fixed
Resizable: use background-image:url(data:) instead of background-image:url(about:blank) as it's shorter and safer. Thanks @epascarello . Better fixes #7233 - Resizable: resizable handles fail to work in IE if transparent and content overlaps
Changeset: 08b6a2b5189f62c62a0ee725629087b445f308d7
comment:10 Changed 2 years ago by Richard Worth
Resizable: use background-image:url(data:) instead of background-image:url(about:blank) as it's shorter and safer. Thanks @epascarello . Better fixes #7233 - Resizable: resizable handles fail to work in IE if transparent and content overlaps (cherry picked from commit 08b6a2b5189f62c62a0ee725629087b445f308d7)
Changeset: 541fda3180d1de5b441c14b0ca516fdcf130be32
comment:11 Changed 2 years ago by rdworth
Related ticket has better fix #7293
comment:12 Changed 2 years ago by scott.gonzalez
- Status changed from closed to reopened
- Resolution fixed deleted
- Milestone 1.8.12 deleted
Removed fix in 42dd56de5a0d67a7db2c2f49dc665e62afce8dda.
comment:14 Changed 2 years ago by jfremy
The fix based on the data: url (with or without a 1x1 image) creates a security warning with IE6 / 7 when the hosted page is on https.
comment:15 Changed 2 years ago by uadev
The fix with 1x1 gif produces white borders for Safari.
The best working alternative seems to be empty string in quotes
background-image:url(data:'');
I have put the above code on jsFiddle: see here.