#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:	unfiled → css

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

milestone:	1.5 → 1.4.4
priority:	undecided → high
status:	new → open

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:	open → assigned

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

keywords:	→ regression
priority:	high → blocker

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

improved test case

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

resolution:	→ worksforme
status:	assigned → closed

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

_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?

Side navigation