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:
Blocked by:		Blocking:

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 (2)

ie8.png (7.7 KB) - added by jide February 03, 2010 12:23PM UTC.

IE 8
jQuery-shadow.jpg (45.6 KB) - added by jide February 02, 2010 11:46PM UTC.

Change History (4)

Changed February 03, 2010 02:29AM UTC by dmethvin comment:1

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 February 03, 2010 12:30PM UTC by jide comment:2

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;
}

Changed February 06, 2010 04:55PM UTC by john comment:3

resolution:	→ wontfix
status:	new → closed

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

Changed February 06, 2010 05:13PM UTC by jide comment:4

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.

Side navigation