Bug Tracker

Ticket #7962 (closed bug: invalid)

Opened 4 years ago

Last modified 3 years ago

'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:
Blocking: Blocked by:

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

comment:1 Changed 4 years ago by addyosmani

  • Priority changed from undecided to 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.

comment:2 Changed 4 years ago by maxim@…

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 4 years ago by jitter (previous) (diff)

comment:3 Changed 4 years ago by rwaldron

  • Component changed from unfiled to css

comment:4 Changed 4 years ago by rwaldron

  • Status changed from new to 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

Last edited 4 years ago by rwaldron (previous) (diff)

comment:5 Changed 4 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 4 years ago by maxim@…

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 3 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 3 years ago by jboesch (previous) (diff)

comment:8 Changed 3 years ago by timmywil

  • Status changed from open to closed
  • Resolution set to invalid

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/

Note: See TracTickets for help on using tickets.