Opened 12 years ago

Last modified 11 years ago

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

Change History (17)

comment:1 Changed 12 years ago by Bluff

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

comment:2 Changed 12 years ago by rdworth

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.

comment:3 Changed 12 years ago by rdworth

Owner: set to 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

comment:4 Changed 12 years ago by Richard Worth

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

comment:5 Changed 12 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:6 Changed 12 years ago by rdworth

Milestone: 1.9 → 1.8.12

comment:7 Changed 12 years ago by Bluff

Quick work -- thank you.

Oops -- I seem to have removed rdworth's comments by making the above edit.

Version 0, edited 12 years ago by Bluff (next)

comment:8 Changed 12 years ago by rdworth

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

comment:9 Changed 12 years ago by Richard Worth

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

comment:10 Changed 12 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 12 years ago by rdworth

Related ticket has better fix #7293

Last edited 12 years ago by rdworth (previous) (diff)

comment:12 Changed 12 years ago by Scott González

Milestone: 1.8.12
Resolution: fixed
Status: closed → reopened

Removed fix in 42dd56de5a0d67a7db2c2f49dc665e62afce8dda.

comment:13 Changed 12 years ago by Scott González

Milestone: → 1.9

comment:14 Changed 12 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 12 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:'');
Last edited 12 years ago by uadev (previous) (diff)

comment:16 Changed 11 years ago by Scott González

Milestone: 1.9.0 → 2.0.0

comment:17 Changed 11 years ago by mikesherov

Status: reopened → open
Note: See TracTickets for help on using tickets.