Skip to main content

Bug Tracker

Side navigation

#7283 closed bug (worksforme)

Opened October 22, 2010 08:27AM UTC

Closed November 01, 2010 11:42PM UTC

Last modified March 14, 2012 01:59AM UTC

jQuery 1.4.3 .css("width") gets scrollWidth

Reported by: xotic750@gmail.com Owned by: john
Priority: blocker Milestone: 1.4.4
Component: css Version: 1.4.3
Keywords: regression Cc:
Blocked by: Blocking:
Description

I have just upgraded to jQuery 1.4.3 (previously using 1.3.2 and 1.4.2) and I'm finding that when I use

.css("width")

it is actually returning the scrollWidth. For now I am having to work around the problem by replacing

.css("width")

with

.attr("style").match(new RegExp("width:\\\\s*([\\\\d\\\\.]+)%"))[1]

I am using Google-Chrome.

I have searched but have not found an answer.

To qualify what I mean here are two samples that show the difference between 1.4.2 and 1.4.3

1.4.2

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<img src="http://img408.imageshack.us/img408/1723/nmgreen.jpg" style="width: 50%; height: 33px;">
<script type="text/javascript">
document.write($("img[src*='nmgreen.jpg']").css("width"));
</script>

</body>
</html>

Returns the value of 50%

1.4.3

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>
<img src="http://img408.imageshack.us/img408/1723/nmgreen.jpg" style="width: 50%; height: 33px;">
<script type="text/javascript">
document.write($("img[src*='nmgreen.jpg']").css("width"));
</script>

</body>
</html>

Returns the scrollWidth, e.g. 290px

Attachments (0)
Change History (10)

Changed October 22, 2010 08:33AM UTC by xotic750@gmail.com comment:1

Link to 1.4.2 example on jsFiddle

http://jsfiddle.net/AvuUA/

Link to 1.4.3 example on jsFiddle

http://jsfiddle.net/gM8fJ/

Changed October 22, 2010 05:48PM UTC by rwaldron comment:2

component: unfiledcss

Changed October 22, 2010 05:54PM UTC by rwaldron comment:3

milestone: 1.51.4.4
priority: undecidedhigh
status: newopen

Confirmed - This changes the behavior significantly between versions.

Ex.

style="width: 50%"

get with .css("width")

1.4.2 returns 50%

1.4.3 returns a pixel value

Changed October 23, 2010 07:24PM UTC by john comment:4

owner: → john
status: openassigned

Changed October 27, 2010 09:58PM UTC by snover comment:5

keywords: → regression
priority: highblocker

Changed October 27, 2010 10:20PM UTC by snover comment:6

Changed November 01, 2010 11:42PM UTC by john comment:7

resolution: → worksforme
status: assignedclosed

Based upon the improved test case posted by snover this is definitely the desired result now - it's getting the actual computed width in pixels.

Changed November 03, 2010 02:06AM UTC by Xotic750 comment:8

If this is the desired result as of 1.4.3 then is there another jQuery method for reading the width as the percentage set?

Changed November 05, 2010 10:18AM UTC by boecko comment:9

_comment0: > this is definitely the desired result now[[BR]] \ \ 1. i think it's wrong to change the expected result between minor versions.[[BR]] \ \ 2. \ a) to introduce a unit converter function (unitInPixels), which can be called if desired \ b) a cssCurrent - function or something , which reports back the current value in pixels or whatever. \ \ 3. for mmToPixels i'm using following function to get the dpi \ \ {{{ \ function getDpi() { \ var mm = 100000; \ var dpitest = $('<div id="dpitest" style="disply:none;width:'+ mm + 'mm;height:10px"/>'); \ var inch2mm = 25.4; \ dpitest.appendTo('body'); \ var px = dpitest.outerWidth(); \ var dpi = Math.round(px / (mm / inch2mm) * 1000) / 1000; \ dpitest.remove(); \ return dpi; \ }; \ }}} \ \ 1288952434817667
this is definitely the desired result now
  • I think it's wrong to change the expected result between minor versions.
  • a cleaner solution would be:

a) to introduce a unit converter function (unitInPixels), which can be called if desired

b) a cssCurrent - function or something , which reports back the current value in pixels or whatever.

3. for mmToPixels i'm using following function to get the dpi

    function getDpi() {
        var mm = 100000;
        var dpitest = $('<div id="dpitest" style="disply:none;width:'+ mm + 'mm;height:10px"/>');
        var inch2mm = 25.4;
        dpitest.appendTo('body');
        var px = dpitest.outerWidth();
        var dpi = Math.round(px / (mm / inch2mm) * 1000) / 1000;
        dpitest.remove();
        return dpi;
    };

Changed December 07, 2010 08:33PM UTC by anonymous comment:10

I have the same problen with jquery 1.4.4.

How can i get real css atrr?