Opened 12 years ago
Closed 11 years ago
#7871 closed bug (wontfix)
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:
- Firefox + jQuery 1.4.4. Block1=0px, Block2=0px
- Firefox + jQuery 1.4.2. Block1=0px, Block2=30px
- 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'))
Change History (10)
comment:1 follow-up: 2 Changed 12 years ago by
Component: | unfiled → css |
---|---|
Milestone: | 1.next |
Priority: | undecided → low |
Status: | new → open |
comment:2 Changed 12 years ago by
Replying to 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):
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:
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:
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:
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:
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});
comment:4 Changed 12 years ago by
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.
comment:6 Changed 12 years ago by
What about the min version? do you have the code to correct this problem for min version?
comment:7 Changed 12 years ago by
you can make min vesrion by minificators.
But different version of jquery (than official) not best way to work.
So, best fix is use:
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.
comment:8 Changed 12 years ago by
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.
comment:10 Changed 11 years ago by
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. :\