Ticket #7233 (open bug)

Opened 3 years ago

Last modified 18 months ago

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:1 Changed 3 years ago by Bluff

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

comment:2 Changed 3 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 3 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 3 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 3 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 3 years ago by rdworth

  • Milestone changed from 1.9 to 1.8.12

comment:7 Changed 3 years ago by Bluff

Quick work -- thank you.

Last edited 3 years ago by Bluff (previous) (diff)

comment:8 Changed 3 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 3 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 3 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 3 years ago by rdworth

Related ticket has better fix #7293

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

comment:12 Changed 3 years ago by scott.gonzalez

  • Status changed from closed to reopened
  • Resolution fixed deleted
  • Milestone 1.8.12 deleted

comment:13 Changed 3 years ago by scott.gonzalez

  • Milestone set to 1.9

comment:14 Changed 3 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 3 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 3 years ago by uadev (previous) (diff)

comment:16 Changed 19 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 2.0.0

comment:17 Changed 18 months ago by mikesherov

  • Status changed from reopened to open
Note: See TracTickets for help on using tickets.