Bug Tracker

Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#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:


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:

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

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 addyosmani

Priority: undecidedlow

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.

comment:2 Changed 12 years ago by [email protected]

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

Last edited 12 years ago by jitter (previous) (diff)

comment:3 Changed 12 years ago by Rick Waldron

Component: unfiledcss

comment:4 Changed 12 years ago by Rick Waldron

Status: newopen










Last edited 12 years ago by Rick Waldron (previous) (diff)

comment:5 Changed 12 years ago by nk111

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 [email protected]

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 jboesch

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."

Last edited 12 years ago by jboesch (previous) (diff)

comment:8 Changed 12 years ago by Timmy Willison

Resolution: invalid
Status: openclosed

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.


Note: See TracTickets for help on using tickets.