Bug Tracker

Modify

Ticket #6014 (closed bug: wontfix)

Opened 4 years ago

Last modified 4 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 4 years ago.
ie8.png Download (7.7 KB) - added by jide 4 years ago.
IE 8

Change History

Changed 4 years ago by jide

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

IE 8

comment:2 Changed 4 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 4 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 4 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.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.