#7962 closed bug (invalid)
'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;
Change History (8)
comment:1 Changed 12 years ago by
| Priority: | undecided → low |
|---|
comment:2 Changed 12 years ago by
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
comment:3 Changed 12 years ago by
| Component: | unfiled → css |
|---|
comment:4 Changed 12 years ago by
| 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
comment:5 Changed 12 years ago by
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/
comment:6 Changed 12 years ago by
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.
comment:7 Changed 12 years ago by
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."
comment:8 Changed 12 years ago by
| 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.
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.