jQuery.css(): Firefox don't return 'auto' values

Question

I'm setting top or bottom and left or right values to a few elements. When i'm trying to access this values with Firefox (16.0.2), i get a wrong value for top (a specific value instead of auto)

CSS

div {
    bottom:200px;
    left:0px;
    top:auto;
    right:auto;
}

JS

$(function(){
    var top = $('div').css('top');
    alert(top);
});

You can try it here: http://jsfiddle.net/UEyxD/2/ (works well in Chrome/Safari)

Any ideas how to prevent this? I want to get

The only way to get the original value i Firefox is to use inline CSS on the element instead, otherwise the calculated value will be returned. — Adam, Nov 19 '12 at 14:51

score 8 · Answer 1 · edited Jun 20 '20 at 09:12

8

I also had this annoying problem.

Some browsers return the computed position if the element is visible at the moment. The trick is to hide it, read the css and then make it visible again (if was not already hidden).

I wrote a convenient function that takes care of this and will return auto in Firefox.

jsFiddle

var getCss = function($elem, prop) {
        var wasVisible = $elem.css('display') !== 'none';
        try {
            return $elem.hide().css(prop);
        } finally {
            if (wasVisible) $elem.show();
        }
    };


alert( getCss($('div'), 'top') );

The finally is just to bring visibility back to the element, just before the function returns.

You should use this function only for situations where you expect auto to be returned.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 22 '13 at 20:09

Jose Rui Santos

15,009
9
58
71

Although I don't like the use of try/finally in this way, the actually background info helped me with the problem – Chris Nov 18 '14 at 07:17
Thank you, I didn't know this. It's like my car has no doors while visible and when it gets invisible, doors potato-appear. – Starmetal Jan 21 '15 at 09:39

Ahmad Ronagh · Answer 2 · 2013-05-06T08:14:06.273

6

You Can Get integer Value of top when you set 'auto' with below code:

$(function(){
    var top = $('div').offset().top;
    alert(top);
});

offset Return Position Value When you Set To Auto

edited May 06 '13 at 08:14

answered Mar 23 '13 at 19:54

Ahmad Ronagh

790
10
16

score 4 · Accepted Answer · edited May 23 '17 at 12:06

4

This is down to the browser and how it interprets the styles, it is somewhat out of your control. However, with particular CSS and jQuery workarounds you should be able to get around it. For instance, if you do not need to the item to be positioned absolutely then you could remove this, or change it to position:static;

Have a look at this question.

As to why Chrome and IE return different values: .css() provides a unified gateway to the browsers' computed style functions, but it doesn't unify the way the browsers actually compute the style. It's not uncommon for browsers to decide such edge cases differently.

edited May 23 '17 at 12:06

Community

1
1

answered Nov 19 '12 at 15:18

Ben Carey

16,540
19
87
169

This problem can be solved, if you read the css property while the element is hidden. This way the browser will not return computed value. See my answer. – Jose Rui Santos Dec 22 '13 at 20:32

score 0 · Answer 4 · answered Nov 19 '12 at 15:13

0

Just remove the position style and you will get auto instead of computed value.

div {
    top: auto;
    bottom:20px;    
    right:20px;
    left:0px;
}

you can test it here.

answered Nov 19 '12 at 15:13

Muhammad Bilal

449
2
6

3

Maybe he needs the `div` to be positioned! – Ben Carey Nov 19 '12 at 15:14

jQuery.css(): Firefox don't return 'auto' values

4 Answers4

Linked