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

[SLogic]

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'))

[snover]

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

[SLogic]

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});

[jitter]

#7861 is a duplicate of this ticket.

[anonymous]

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.

[anonymous]

issue is present when using jquery tools overlay.

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

[anonymous]

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

[SLogic]

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.

[john]

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

[anonymous]

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

[dmethvin]

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