Skip to main content

Bug Tracker

Side navigation

#7871 closed bug (wontfix)

Opened December 30, 2010 11:20AM UTC

Closed April 17, 2012 01:03AM UTC

wrong css position values in firefox when block set to "position: absolute, display: none"

Reported by: SLogic Owned by:
Priority: low Milestone: 1.next
Component: css Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:
Description

Example http://jsfiddle.net/SpeedLogic/FE8xN/

Block1 - allready have it's parameters in html and css

Block2 - used appendTo and added css by jquery.

results of "css.('left')" with different combinations:

1. Firefox + jQuery 1.4.4. Block1=0px, Block2=0px

2. Firefox + jQuery 1.4.2. Block1=0px, Block2=30px

3. Opera or IE + jQuery 1.4.x. Block1=40px, Block2=30px.

Firefox version 3.6.13, OS Windows 7 Ultimate.

This problem exists only when block set to "position: absolute, display: none". If we change position to relative or display to block, firefox will get right values (Block1=40px, Block2=30px.) with any jQuery version.

And like you can see, in jQuery 1.4.2 blocks with css added by jquery works fine in firefox (we can get it's .css('left'))

Attachments (0)
Change History (10)

Changed December 31, 2010 11:11PM UTC by snover comment:1

component: unfiledcss
milestone: 1.next
priority: undecidedlow
status: newopen

Firefox 4 beta gets it right, so it seems that this is some bug in Fx3.6 and earlier only. :\\

Changed January 01, 2011 08:01PM UTC by SLogic comment:2

_comment0: Replying to [comment:1 snover]: \ > Firefox 4 beta gets it right, so it seems that this is some bug in Fx3.6 and earlier only. :\\ \ \ Yes, it's a bug of firefox (when "position: absolute, display: none" it gets a clear style by elem.style), but there are some problems in jquery 1.4.3+, because, like in exapmle, 1.4.2 can get css values, that was set by jquery.css.({values}). \ \ In 1.4.3+ curCSS was replaced with fx.css, and there the part with the problem: (lines 5475-5494): \ {{{ \ #!js \ if ( document.defaultView && document.defaultView.getComputedStyle ) { \ getComputedStyle = function( elem, newName, name ) { \ var ret, defaultView, computedStyle; \ \ name = name.replace( rupper, "-$1" ).toLowerCase(); \ \ if ( !(defaultView = elem.ownerDocument.defaultView) ) { \ return undefined; \ } \ \ if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) { \ ret = computedStyle.getPropertyValue( name ); \ if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) { \ ret = jQuery.style( elem, name ); \ } \ } \ \ return ret; \ }; \ } \ }}} \ \ if we replace it's with: \ \ {{{ \ #!js \ if ( document.defaultView && document.defaultView.getComputedStyle ) { \ getComputedStyle = function( elem, newName, name ) { \ var ret, defaultView, computedStyle, style = elem.style; \ \ name = name.replace( rupper, "-$1" ).toLowerCase(); \ \ if ( !(defaultView = elem.ownerDocument.defaultView) ) { \ return undefined; \ } \ \ if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) { \ if (style && style[ name ] ) { \ ret = jQuery.style( elem, name ); \ } else { \ ret = computedStyle.getPropertyValue( name ); \ } \ \ } \ \ return ret; \ }; \ } \ }}} \ \ It will fix problem in 1.4.3+ , and it will get "left:30px" for block#2 in my example, like jQuery 1.4.2. \ But only I don't know which method is better "ret = jQuery.style( elem, name );" of "ret = computedStyle.getPropertyValue( name );". If first - than it will only good changes for 1.4.4. If second way is faster - than it will be more slower, after change. But more right :) \ 1293912444864515
_comment1: Replying to [comment:1 snover]: \ > Firefox 4 beta gets it right, so it seems that this is some bug in Fx3.6 and earlier only. :\\ \ \ Yes, it's a bug of firefox (when "position: absolute, display: none" it gets a clear style by elem.style), but there are some problems in jquery 1.4.4, because, like in exapmle, 1.4.2 can get css values, that was set by jquery.css.({values}). \ \ In 1.4.4 curCSS was replaced with fx.css, and there the part with the problem: (lines 5475-5494): \ {{{ \ #!js \ if ( document.defaultView && document.defaultView.getComputedStyle ) { \ getComputedStyle = function( elem, newName, name ) { \ var ret, defaultView, computedStyle; \ \ name = name.replace( rupper, "-$1" ).toLowerCase(); \ \ if ( !(defaultView = elem.ownerDocument.defaultView) ) { \ return undefined; \ } \ \ if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) { \ ret = computedStyle.getPropertyValue( name ); \ if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) { \ ret = jQuery.style( elem, name ); \ } \ } \ \ return ret; \ }; \ } \ }}} \ \ if we replace it's with: \ \ {{{ \ #!js \ if ( document.defaultView && document.defaultView.getComputedStyle ) { \ getComputedStyle = function( elem, newName, name ) { \ var ret, defaultView, computedStyle, style = elem.style; \ \ name = name.replace( rupper, "-$1" ).toLowerCase(); \ \ if ( !(defaultView = elem.ownerDocument.defaultView) ) { \ return undefined; \ } \ \ if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) { \ if (style && style[ name ] ) { \ ret = jQuery.style( elem, name ); \ } else { \ ret = computedStyle.getPropertyValue( name ); \ } \ \ } \ \ return ret; \ }; \ } \ }}} \ \ It will fix problem in 1.4.4 , and it will get "left:30px" for block#2 in my example, like jQuery 1.4.2. \ But only I don't know which method is better "ret = jQuery.style( elem, name );" of "ret = computedStyle.getPropertyValue( name );". If first - than it will only good changes for 1.4.4. If second way is faster - than it will be more slower, after change. But more right :) \ 1293929097957877
_comment2: Replying to [comment:1 snover]: \ > Firefox 4 beta gets it right, so it seems that this is some bug in Fx3.6 and earlier only. :\\ \ \ Yes, it's a bug of firefox (when "position: absolute, display: none" it gets a clear style by elem.style), but there are some problems in jquery 1.4.4, because, like in exapmle, 1.4.2 can get css values, that was set by jquery.css.({values}). \ \ In 1.4.4 curCSS was replaced with fx.css, and there the part with the problem: (lines 5475-5494): \ {{{ \ #!js \ if ( document.defaultView && document.defaultView.getComputedStyle ) { \ getComputedStyle = function( elem, newName, name ) { \ var ret, defaultView, computedStyle; \ \ name = name.replace( rupper, "-$1" ).toLowerCase(); \ \ if ( !(defaultView = elem.ownerDocument.defaultView) ) { \ return undefined; \ } \ \ if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) { \ ret = computedStyle.getPropertyValue( name ); \ if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) { \ ret = jQuery.style( elem, name ); \ } \ } \ \ return ret; \ }; \ } \ }}} \ \ if we replace it's with: \ \ {{{ \ #!js \ if ( document.defaultView && document.defaultView.getComputedStyle ) { \ getComputedStyle = function( elem, newName, name ) { \ var ret, defaultView, computedStyle, style = elem.style; \ \ name = name.replace( rupper, "-$1" ).toLowerCase(); \ \ if ( !(defaultView = elem.ownerDocument.defaultView) ) { \ return undefined; \ } \ \ if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) { \ if (style && style[ name ] ) { \ ret = jQuery.style( elem, name ); \ } else { \ ret = computedStyle.getPropertyValue( name ); \ } \ \ } \ \ return ret; \ }; \ } \ }}} \ \ It will fix problem in 1.4.4 , and it will get "left:30px" for block#2 in my example, like jQuery 1.4.2. \ But only I don't know which method is better "ret = jQuery.style( elem, name );" of "ret = computedStyle.getPropertyValue( name );". If first - than it will only good changes for 1.4.4. If second way is faster - than it will be more slower, after change. But more right :) \ \ \ Update: \ Maybe even more better to do that way: \ {{{ \ #!js \ if ( document.defaultView && document.defaultView.getComputedStyle ) { \ getComputedStyle = function( elem, newName, name ) { \ var ret, defaultView, computedStyle, style = elem.style; \ \ \ \ if ( !(defaultView = elem.ownerDocument.defaultView) ) { \ return undefined; \ } \ \ if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) { \ if (style && style[ name ] ) { \ ret = jQuery.style( elem, name ); \ } else { \ name = name.replace( rupper, "-$1" ).toLowerCase(); \ ret = computedStyle.getPropertyValue( name ); \ } \ \ } \ \ return ret; \ }; \ } \ }}} \ \ It's resolve other broken things by 1.4.4 (and 1.4.3), for example it's fix the http://bugs.jquery.com/ticket/7746 \ This example will work even better than with 1.4.2 because now with that fix for 1.4.4 we can get all border-colors of the all 4 blocks(only 2 block in 1.4.2+FF, and 0 blocks in 1.4.4+FF) \ Also I checked Opera and IE, all works fine with that fix. But as I said before, maybe it's not the fastest way, but it shows where problem is.1293993519278223

Replying to [comment:1 snover]:

Firefox 4 beta gets it right, so it seems that this is some bug in Fx3.6 and earlier only. :\\

Yes, it's a bug of firefox (when "position: absolute, display: none" it gets a clear style by elem.style), but there are some problems in jquery 1.4.4, because, like in exapmle, 1.4.2 can get css values, that was set by jquery.css.({values}).

In 1.4.4 curCSS was replaced with fx.css, and there the part with the problem: (lines 5475-5494):

  #!js
  if ( document.defaultView && document.defaultView.getComputedStyle ) {
	getComputedStyle = function( elem, newName, name ) {
		var ret, defaultView, computedStyle;

		name = name.replace( rupper, "-$1" ).toLowerCase();

		if ( !(defaultView = elem.ownerDocument.defaultView) ) {
			return undefined;
		}

		if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) {
			ret = computedStyle.getPropertyValue( name );
			if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {
				ret = jQuery.style( elem, name );
			}
		}

		return ret;
	};
}
  

if we replace it's with:

  #!js
if ( document.defaultView && document.defaultView.getComputedStyle ) {
	getComputedStyle = function( elem, newName, name ) {
		var ret, defaultView, computedStyle, style = elem.style;

		name = name.replace( rupper, "-$1" ).toLowerCase();

		if ( !(defaultView = elem.ownerDocument.defaultView) ) {
			return undefined;
		}

		if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) {
			if (style && style[ name ] ) {
				ret = jQuery.style( elem, name );
			} else {
			ret = computedStyle.getPropertyValue( name );
			}

		}

		return ret;
	};
}
  

It will fix problem in 1.4.4 , and it will get "left:30px" for block#2 in my example, like jQuery 1.4.2.

But only I don't know which method is better "ret = jQuery.style( elem, name );" of "ret = computedStyle.getPropertyValue( name );". If first - than it will only good changes for 1.4.4. If second way is faster - than it will be more slower, after change. But more right :)

Update:

Maybe even more better to do that way:

  #!js
if ( document.defaultView && document.defaultView.getComputedStyle ) {
	getComputedStyle = function( elem, newName, name ) {
		var ret, defaultView, computedStyle, style = elem.style;

		

		if ( !(defaultView = elem.ownerDocument.defaultView) ) {
			return undefined;
		}

		if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) {
			if (style && style[ name ] ) {
				ret = jQuery.style( elem, name );
			} else {
			name = name.replace( rupper, "-$1" ).toLowerCase();
			ret = computedStyle.getPropertyValue( name );
			}

		}

		return ret;
	};
}
  

It's resolve other broken things by 1.4.4 (and 1.4.3), for example it's fix the http://bugs.jquery.com/ticket/7746

This example will work even better than with 1.4.2 because now with that fix for 1.4.4 we can get all border-colors of the all 4 blocks(only 2 block in 1.4.2+FF, and 0 blocks in 1.4.4+FF)

Also I checked Opera and IE, all works fine with that fix. But as I said before, maybe it's not the fastest way, but it shows where problem is.

Update#2:

After another look on the problem, i think main bug (of original 1.4.4) is in line 5487:

  #!js
if ( ret === "" && !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {
		ret = jQuery.style( elem, name );
}
  

wrong code is "&& !jQuery.contains". This condition is never satisfied, there must be "&& jQuery.contains". Then things will work good.

But if we fix problem like this, it help with http://bugs.jquery.com/ticket/7746 ,but not with my ticket, bacause Bug in FF fill into computedStyle "0px" (not "" like it must be, when value can't be found) for all position values (top, left, right, bottom) when block set to "position: absolute, display: none" and sytle added by jquery.css({values})

So, in my opinion, to do all best way, line 5487 must be fix like this:

  #!js
if ( ret === "" && jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {
		ret = jQuery.style( elem, name );
}
  

And then added some fix to computedStyle in FF for blocks with "position: absolute, display: none" or even after fix we still will get in FF 3.6 0px for position values in blocks with "position: absolute, display: none", when styles was added by jquery.css({values});

Or we can just use code in my first update, it do some overwork, but get right results even for FF "position: absolute, display: none" + css set by jquery.css({values});

Changed January 08, 2011 04:13AM UTC by jitter comment:3

#7861 is a duplicate of this ticket.

Changed February 07, 2011 04:33PM UTC by anonymous comment:4

i can confirm i am experiencing exactly the same issue.

overlay.css("top")

returns a value in all browsers except firefox 3.6 which returns ZERO.

Changed February 24, 2011 11:45PM UTC by anonymous comment:5

issue is present when using jquery tools overlay.

https://github.com/jquerytools/jquerytools/issues/310

Changed March 31, 2011 07:17PM UTC by anonymous comment:6

What about the min version? do you have the code to correct this problem for min version?

Changed April 01, 2011 01:13PM UTC by SLogic comment:7

_comment0: you can make min vesrion by minificators. \ \ But different version of jquery (than official) not best way to work. \ \ So, best fix is use: \ {{{ \ #!js \ block = $('#block2')[0]; \ getBlockLeftValue = jQuery.style(block, 'top'); \ }}} \ \ It works with any jquery vesrion. Full example here http://jsfiddle.net/FE8xN/5/ \ \ But don't forget, that it show only value, that was added by jquery. If value was added by css, there is no method to get it in FF3.6 when position=absolute and display=none.1301663962552779

you can make min vesrion by minificators.

But different version of jquery (than official) not best way to work.

So, best fix is use:

#!js
block = $('#block2')[0];
getBlockLeftValue = jQuery.style(block, 'left');

It works with any jquery vesrion. Full example here http://jsfiddle.net/FE8xN/6/

But don't forget, that it show only value, that was added by jquery. If value was added by css, there is no method to get it in FF3.6 when position=absolute and display=none.

Changed April 17, 2011 06:25PM UTC by john comment:8

milestone: → 1.next

Unfortunately the proposed change is not sufficient - it has the potential to cause other problems in other browsers. A patch would be appreciated.

Changed April 16, 2012 04:15PM UTC by anonymous comment:9

sad to see nothing has been done yet (jQuery 1.7.1 + FF 3.6)

Changed April 17, 2012 01:03AM UTC by dmethvin comment:10

resolution: → wontfix
status: openclosed

Mozilla is dropping support for Firefox 3.6 this month, so we are not going to address this.