#7962 closed bug (invalid)

Opened January 13, 2011 04:35PM UTC

Closed May 11, 2011 06:52PM UTC

Last modified March 10, 2012 09:44AM UTC

'width' property of <select> element is wrongly calculated for Safari

Reported by:	Mr.Shift_and_Dr.Alt	Owned by:
Priority:	low	Milestone:	1.next
Component:	css	Version:	1.4.4
Keywords:		Cc:
Blocked by:		Blocking:

Description

I encountered a problem that ''$(element).width()'' and ''$(element).css('width')'' return wrong width for Safari 5.0.3 for Windows. It works fine for Firefox and IE though. jQuery 1.4.2 works fine for all the mentioned browsers.

I tested the following code below:

<html>
<head>
    <style type="text/css">
    .zozo{
        width: 400px;
    }
    </style>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var $zozo=$('#zozo');
        var log='';
        log+='$zozo.width()='+$zozo.width()+'\\n';
        log+='$zozo.css("width")='+$zozo.css('width')+'\\n';
        alert(log);
    });
    </script>
</head>
<body>
    <select id="zozo" class="zozo">
        <option value="1">123</option>
        <option value="2">12345</option>
    </select>
</body>
</html>

Safari displays: $zozo.width()=375, $zozo.css("width")=375px;

Firefox displays: $zozo.width()=398, $zozo.css("width")=398px;

Attachments (0)

Change History (8)

Changed January 13, 2011 07:17PM UTC by addyosmani comment:1

priority:	undecided → low

The above test case on jsFiddle http://jsfiddle.net/addyosmani/TCrsQ/. Conversely, I get the correct values when testing this in Safari 5.03 on OSX.

Changed January 14, 2011 12:22PM UTC by jitter comment:2

_comment0:	Agree that it works fine on '''OSX''' but it does not for '''Windows 7''' and '''Windows XP'''(Safari 5.0.3) \ \ Screenshot: [[Image(http://www.dropmocks.com/mPp92)]] → 1295048381746462

Agree that it works fine on OSX but it does not for Windows 7 and Windows XP(Safari 5.0.3)

Screenshot: http://www.dropmocks.com/mPp92

Changed January 18, 2011 01:37PM UTC by rwaldron comment:3

component:	unfiled → css

Changed January 24, 2011 08:34PM UTC by rwaldron comment:4

_comment0:	Chrome: \ \ $zozo.width()=398 \ $zozo.css("width")=398px \ \ Safari: \ \ $zozo.width()=375 \ $zozo.css("width")=375px \ \ Firefox: \ \ $zozo.width()=398 \ $zozo.css("width")=398px → 1295901322389306
status:	new → open

Chrome:

$zozo.width()=398

$zozo.css("width")=398px

Safari:

$zozo.width()=375

$zozo.css("width")=375px

Firefox:

$zozo.width()=398

$zozo.css("width")=398px

Changed January 25, 2011 11:06PM UTC by nk111 comment:5

The reason for this seems to be that Safari computes a padding-left of about 4px and a padding-right of 21px for select elements - even if the padding is set to 0 explicitly!

These paddings are then subtracted by jquery when the width is calculated.

See this updated fiddle example: http://jsfiddle.net/TCrsQ/7/

Changed January 26, 2011 09:36AM UTC by maxim@softgrad.com comment:6

Thank you for the answer. Yes, this explains the behavior but unfortunately this does not explain why the 1.4.2 version performs right calculations and we do not need the additional CSS codes but the new 1.4.4 version does not provide backward compatibility. What I mean is that if I use 1.4.2 version that everything goes fine in the mentioned browser and if I use this new 1.4.4 version then I have markup broken. I do not think it is right approach to fix CSS in case you replace jQuery version in the application when it worked well before.

Changed May 11, 2011 05:16AM UTC by jboesch comment:7

_comment0:	This is an annoying issue, but invalid. This is due to how some browsers (like FF) handle the "box-sizing" CSS prop for elements. They use "box-sizing: border-box" instead of "box-sizing: content-box" for certain form elements. \ \ Here is a jsfiddle of it working 400px is all browsers: http://jsfiddle.net/jboesch26/HuDxK/ \ \ Here is another ticket that was closed:invalid with this same type of problem: http://bugs.jquery.com/ticket/4146 \ In this ticket, timmywil describes what happens in IE8 (because it might produce a diff width) \ \ "I've looked into this further and it seems we're fine here. IE8 and Chromium 12 actually have the same setting for box-sizing for buttons, but IE has different default border widths and padding widths, hence the different values. If I set the borders and paddings to equal amounts, all consistent. The reason setting the width to some value might make the button smaller is due to the box-sizing." → 1305091201517091
_comment1:	This is an annoying issue, but invalid. This is due to how some browsers handle the "box-sizing" CSS prop for elements. They use "box-sizing: border-box" instead of "box-sizing: content-box" for certain form elements. \ \ Here is a jsfiddle of it working 400px on Mac (FF, Safari, Opera, Chrome): http://jsfiddle.net/jboesch26/HuDxK/ \ Haven't checked Safari on Windows... hope it works ;) \ \ Here is another ticket that was closed:invalid with this same type of problem: http://bugs.jquery.com/ticket/4146 \ In this ticket, timmywil describes what happens in IE8 (because it might produce a diff width) \ \ "I've looked into this further and it seems we're fine here. IE8 and Chromium 12 actually have the same setting for box-sizing for buttons, but IE has different default border widths and padding widths, hence the different values. If I set the borders and paddings to equal amounts, all consistent. The reason setting the width to some value might make the button smaller is due to the box-sizing." → 1305091662746869
_comment2:	This is an annoying issue, but invalid. This is due to how some browsers handle the "box-sizing" CSS prop for elements. They use "box-sizing: border-box" instead of "box-sizing: content-box" for certain form elements. \ \ Here is a jsfiddle of it working 400px on PC (Safari) Mac (FF, Safari, Opera, Chrome): http://jsfiddle.net/jboesch26/HuDxK/ \ \ Here is another ticket that was closed:invalid with this same type of problem: http://bugs.jquery.com/ticket/4146 \ In this ticket, timmywil describes what happens in IE (because it might produce a diff width) \ \ "I've looked into this further and it seems we're fine here. IE8 and Chromium 12 actually have the same setting for box-sizing for buttons, but IE has different default border widths and padding widths, hence the different values. If I set the borders and paddings to equal amounts, all consistent. The reason setting the width to some value might make the button smaller is due to the box-sizing." → 1305091750910838

This is an annoying issue, but invalid. This is due to how some browsers handle the "box-sizing" CSS prop for elements. They use "box-sizing: border-box" instead of "box-sizing: content-box" for certain form elements.

Here is a jsfiddle of it working 400px on PC (Safari) Mac (FF, Safari, Opera, Chrome): http://jsfiddle.net/jboesch26/HuDxK/

Here is another ticket that was closed:invalid with this same type of problem: http://bugs.jquery.com/ticket/4146

In this ticket, timmywil describes what happens in IE (because it might produce a diff width)

"I've looked into this further and it seems we're fine here. IE8 and Chromium 12 actually have the same setting for box-sizing for buttons, but IE has different default border widths and padding widths, hence the different values. If I set the borders and paddings to equal amounts, all consistent. The reason setting the width to some value might make the button smaller is due to the box-sizing."

Changed May 11, 2011 06:52PM UTC by timmywil comment:8

resolution:	→ invalid
status:	open → closed

Well, width should work regardless of box-sizing. But yes, the defaults paddings are different in different browsers, hence the different widths. Setting to the same value makes it consistent. -webkit-appearance overrides padding settings.

http://jsfiddle.net/timmywil/TCrsQ/19/

Side navigation