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 comment:1
component: | unfiled → css |
---|---|
milestone: | 1.next |
priority: | undecided → low |
status: | new → open |
Changed January 01, 2011 08:01PM UTC by 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 February 07, 2011 04:33PM UTC by 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 comment:5
issue is present when using jquery tools overlay.
Changed March 31, 2011 07:17PM UTC by 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 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 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 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 comment:10
resolution: | → wontfix |
---|---|
status: | open → closed |
Mozilla is dropping support for Firefox 3.6 this month, so we are not going to address this.
Firefox 4 beta gets it right, so it seems that this is some bug in Fx3.6 and earlier only. :\\