Bug Tracker

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#6014 closed bug (wontfix)

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:


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">
		<title>Test jQuery</title>
		<style type="text/css">
			#test {
				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')";
		<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());
	<div id="test">
		A test div.
	<div id="output">

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)

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

Download all attachments as: .zip

Change History (6)

Changed 7 years ago by jide

Attachment: jQuery-shadow.jpg added

comment:1 Changed 7 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 7 years ago by jide

Attachment: ie8.png added

IE 8

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

Resolution: wontfix
Status: newclosed

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 7 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.