Bug Tracker

Ticket #6014 (closed bug: wontfix)

Opened 5 years ago

Last modified 5 years ago

IE bug : Using Shadow filter adds extra size to elements, so does height(), width()...

Reported by: jide Owned by: brandon
Priority: major Milestone: 1.4.2
Component: dimensions Version: 1.4.1
Keywords: Cc:
Blocking: Blocked by:

Description

When an element uses an IE specific Shadow filter in CSS, the element dimensions are modified :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<title>Test jQuery</title>
		<style type="text/css">
			#test {
				height:100px;
				background:red;
				box-shadow: 0 3px 20px #000;
				-moz-box-shadow: 0 3px 20px #000;
				-webkit-box-shadow: 0 3px 20px #000;
				-khtml-box-shadow: 0 3px 20px #000;
				filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10');
				-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10')";
			}
		</style>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#output').text('Height : '+$('#test').height());
			});
		</script>
	</head>
	<body>
	<div id="test">
		A test div.
	</div>
	<div id="output">
	</div>
	</body>
</html>

This affects every versions of jQuery.

Since the element height in IE in the DOM is effectively 10px bigger, I personally do not think it is a jQuery bug, but rather an IE bug jQuery can't do anything about. There has been a long debate on an issue on drupal.org ( http://drupal.org/node/535066), but I decided to fill a bug here in case.

Attachments

jQuery-shadow.jpg Download (45.6 KB) - added by jide 5 years ago.
ie8.png Download (7.7 KB) - added by jide 5 years ago.
IE 8

Change History

Changed 5 years ago by jide

comment:1 Changed 5 years ago by dmethvin

Thanks, it's good to know about this effect. I tend to agree that there's nothing we can do since it seems like an IE thing that operates outside the normal box model.

Changed 5 years ago by jide

IE 8

comment:2 Changed 5 years ago by jide

Digging further, I noticed a few additional things that may lead to conclude to a bug finally :

in IE8, height also return the extra size, but the shadow does not "push" the next sibling below it. So in IE8 it can be considered bogus to have 110px as a result to the height() function. See attached screenshot.

Moreover, for all versions this time, maybe it is more problematic that the innerHeight() function returns the extra size.

The workaround I used could inspire a patch if it is decided it is a real bug :

if ($('#toolbar').attr('filters') && $('#toolbar').attr('filters').item("DXImageTransform.Microsoft.Shadow")) {
  height -= $('#toolbar').attr('filters').item("DXImageTransform.Microsoft.Shadow").strength;
}

comment:3 Changed 5 years ago by john

  • Status changed from new to closed
  • Resolution set to wontfix

As I brought up in the forum thread, this just isn't something that we're likely to fix natively in core (since it's both obscure and a browser-specific bit of hackery). Sorry :-/

comment:4 Changed 5 years ago by jide

I'm reproducing the updated fix from the forum thread :

For people who may encounter this problem, here is a code snippet that may help :

if ($('.myselector').css('filter').match(/DXImageTransform\.Microsoft\.Shadow/)) {
  height -= $('.myselector').get(0).filters.item("DXImageTransform.Microsoft.Shadow").strength;
}

We cannot do :

if ($('.myselector').get(0).filters && $('.myselector').get(0).filters.item("DXImageTransform.Microsoft.Shadow")) {

Since this would throw an error if no filter is set on the element.

Note: See TracTickets for help on using tickets.