Bug Tracker

Modify

Ticket #7871 (closed bug: wontfix)

Opened 3 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

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

Change History

comment:1 follow-up: ↓ 2 Changed 3 years ago by snover

  • Priority changed from undecided to low
  • Status changed from new to open
  • Component changed from unfiled to css
  • Milestone 1.next deleted

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

comment:2 in reply to: ↑ 1 Changed 3 years ago by 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});

Last edited 3 years ago by SLogic (previous) (diff)

comment:3 Changed 3 years ago by jitter

#7861 is a duplicate of this ticket.

comment:4 Changed 3 years ago by 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.

comment:5 Changed 3 years ago by anonymous

issue is present when using jquery tools overlay.

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

comment:6 Changed 3 years ago by anonymous

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

comment:7 Changed 3 years ago by 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, '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.

Version 0, edited 3 years ago by SLogic (next)

comment:8 Changed 3 years ago by john

  • Milestone set to 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:9 Changed 2 years ago by anonymous

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

comment:10 Changed 2 years ago by dmethvin

  • Status changed from open to closed
  • Resolution set to wontfix

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

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.