#7233 open bug ()

Opened April 09, 2011 07:03PM UTC

Last modified October 27, 2012 08:19PM UTC

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:
Blocked by: Blocking:
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>
Attachments (0)
Change History (17)

Changed April 09, 2011 07:16PM UTC by Bluff comment:1

I have put the above code on jsFiddle: see here.

Changed April 09, 2011 07:36PM UTC by rdworth comment:2

status: new → 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.

Changed April 09, 2011 07:40PM UTC by rdworth comment:3

owner: → rdworth
status: open → assigned
summary: in IE8, text inside a resizable can prevent resizing → Resizable: resizable handles fail to work in IE if transparent and content overlaps

Changed April 09, 2011 07:54PM UTC by Richard Worth comment:4

resolution: → fixed
status: assigned → closed

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

Changed April 09, 2011 07:57PM UTC by Richard Worth comment:5

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

Changed April 09, 2011 07:57PM UTC by rdworth comment:6

milestone: 1.9 → 1.8.12

Changed April 09, 2011 08:14PM UTC by Bluff comment:7

_comment0: Quick work -- thank you. \ \ Oops -- I seem to have removed rdworth's comments by making the above edit. → 1302380076793594

Quick work -- thank you.

Changed April 10, 2011 03:08AM UTC by rdworth comment:8

resolution: fixed
status: closed → reopened

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:)

Changed April 10, 2011 03:13AM UTC by Richard Worth comment:9

resolution: → fixed
status: reopened → closed

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

Changed April 10, 2011 03:14AM UTC by Richard Worth comment:10

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

Changed April 29, 2011 10:59AM UTC by rdworth comment:11

_comment0: Related ticket has better fix http://bugs.jqueryui.com/ticket/7293 → 1304074772278138

Related ticket has better fix #7293

Changed May 20, 2011 01:58PM UTC by scottgonzalez comment:12

milestone: 1.8.12
resolution: fixed
status: closed → reopened

Removed fix in 42dd56de5a0d67a7db2c2f49dc665e62afce8dda.

Changed May 20, 2011 01:58PM UTC by scottgonzalez comment:13

milestone: → 1.9

Changed June 17, 2011 07:06PM UTC by jfremy comment:14

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.

Changed June 20, 2011 09:27AM UTC by uadev comment:15

_comment0: The fix with 1x1 gif produces white borders for Safari. \ \ The best working alternative seems to be \ {{{ \ background-image:url(data:''); \ }}} \ \ → 1308562063813120

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:'');

Changed October 11, 2012 02:52PM UTC by scottgonzalez comment:16

milestone: 1.9.0 → 2.0.0

Changed October 27, 2012 08:19PM UTC by mikesherov comment:17

status: reopened → open