Closed
Bug 1164783
Opened 9 years ago
Closed 9 years ago
<input type="search"> doesn't have border-box box-sizing
Categories
(Core :: Layout: Form Controls, defect)
Tracking
()
RESOLVED
FIXED
mozilla41
Tracking | Status | |
---|---|---|
firefox41 | --- | fixed |
People
(Reporter: kermani, Assigned: karlcow)
References
Details
Attachments
(5 files, 2 obsolete files)
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0 Build ID: 20150511143336 Steps to reproduce: I was designing a webpage, page (http://jsfiddle.net/3qzb7q0d/) has header and inside header there were button(s) and input(s). I didn't know about box-sizing and the page was working grate on other browsers but Firefox had problem. I researched and found out Firefox needs to have some lines of CSS to become like other browsers (and maybe the problem is from other browsers): html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } Actual results: When I added the CSS (http://jsfiddle.net/3qzb7q0d/2/) Firefox rendered the page like other browsers (Grate). The below image likes are from the time before I add that CSS to my web page and it show the problem in Firefox: http://balit.ir/firefox/chrome.png http://balit.ir/firefox/opera.png http://balit.ir/firefox/safari.png http://balit.ir/firefox/firefox.png Expected results: As you should know there are a lot of websites that must add that lines of CSS to their websites just for Firefox (I guess) and other people (beginners) who don't know about box-sizing should take a long time to find out what is the problem. (What do you think to) change Firefox box-sizing to become like other browsers?
Updated•9 years ago
|
Component: Untriaged → Layout: Block and Inline
Product: Firefox → Core
You're probably seeing a difference in the sizing of a particular form control. No browser since very old versions of IE generally behaved as though box-sizing:border-box was set on all elements.
Component: Layout: Block and Inline → Layout: Form Controls
Summary: Firefox needs to set box-sizing other browsers don't → some form control sizing difference between Firefox and other browsers
This bug could use a simple testcase showing what the actual difference is between browsers.
Keywords: qawanted
Comment hidden (offtopic) |
![]() |
||
Comment 6•9 years ago
|
||
The basic structure of the testcase is as follows: There is a <div id="search-div"> with a fixed width of 432px set. This contains three things: 1) A <input type="submit"> with zero margin, border, padding, and a fixed width of 48px. 2) An <input type="search"> with zero margin, 1px left border, 5px left padding, 325px fixed width, 5px right padding, 1px right border. 3) A <div> with 49px width and display:inline-block. The sum of all those widths is 48 + 49 + 325 + 2 + 10 = 434px. This is more than 432px, so the three things don't fit. It looks like at least Chrome defaults to "box-sizing:border-box" on the <input type="search">, so there the total width is 48 + 49 + 325 = 422px, which may or may not fit in the 432px div (because it also has to fit the width of the two spaces, which may be more or less than 10px depending on fonts). Per HTML spec at https://html.spec.whatwg.org/multipage/rendering.html#rendering the only inputs that should have border-box sizing in standards mode are radio, checkbox, reset, button, submit (and <select> and <button> elements). So it looks like we're following the spec here and Chrome is not.
Summary: some form control sizing difference between Firefox and other browsers → <input type="search"> doesn't have border-box box-sizing
Comment hidden (offtopic) |
Comment hidden (offtopic) |
Comment hidden (offtopic) |
![]() |
Assignee | |
Comment 10•9 years ago
|
||
Confirmed and it creates WebCompat issue. See https://webcompat.com/issues/1229#issuecomment-110546025
See Also: → https://webcompat.com/issues/1229
![]() |
Assignee | |
Comment 11•9 years ago
|
||
(In reply to Not doing reviews right now from comment #9) > I explained that for the case of Chrome in the text you quoted. It's in fact true for * Blink browsers (Chrome, Opera, etc) * WebKit browsers (Safari iOS) If someone can test on Spartan IE and on MS Edge, that would be nice.
![]() |
Assignee | |
Comment 12•9 years ago
|
||
Not sure if it's the right file to modify, but it seemed logical, tell me if I should do something else. Be gentle. :)
Attachment #8617693 -
Flags: review?(dbaron)
![]() |
||
Comment 13•9 years ago
|
||
You should probably do the whitespace cleanup in a separate changeset from the substantive change. And raise a spec issue here? IE11 seems to have border-box sizing here too. I don't have a simple way to try Spartan/Edge.
![]() |
Assignee | |
Comment 14•9 years ago
|
||
ah thanks boris, just noticed the spaces. Sorry about that. I guess my editor clean up the spaces itself.
I will change the patch.
> And raise a spec issue here?
by "here", you meant on W3C bugzilla on CSS? Or something else?
![]() |
||
Comment 15•9 years ago
|
||
"here" == "for the whatwg HTML spec", probably. So yeah, the W3C bugzilla.
![]() |
Assignee | |
Comment 16•9 years ago
|
||
The new patch with only the added rule.
Attachment #8617693 -
Attachment is obsolete: true
Attachment #8617693 -
Flags: review?(dbaron)
Attachment #8617711 -
Flags: review?(dbaron)
![]() |
Assignee | |
Comment 17•9 years ago
|
||
I opened a bug on HTML spec https://www.w3.org/Bugs/Public/show_bug.cgi?id=28784
Comment on attachment 8617711 [details] [diff] [review] useragentstyle-bug1164783-2.patch r=dbaron, although I'd probably skip the comment You should have a useful commit message (and, in general, you should have the commit message in the patch when you post it for review), such as: Bug 1164783 - Change default style for input type=search to box-sizing: border-box. r=dbaron
Attachment #8617711 -
Flags: review?(dbaron) → review+
![]() |
Assignee | |
Comment 19•9 years ago
|
||
Hmm I didn't know I had the right to commit. The process I was taught was cd /your/path/mozilla-central hg status hg qpop -a hg pull -u # cd somewhere in the code # edit what I need and save hg qnew blahname-bug_number.patch # attach the patch # ask for r? # when r+, put keywords checkin-needed If there is a better process, I will be happy to comply and indeed provide a better message. Slapping my face with a URI on the appropriate way to do it is fine.
(In reply to Karl Dubost :karlcow from comment #19) > hg qnew blahname-bug_number.patch This should also have a '-m "Commit message here."' argument, which has the commit message that ends up being used in the patch. If it's at all complicated, though, you'll want a multi-line commit message, which you can edit with -e instead. (See "hg help qnew", or "hg help qrefresh".) Then it will end up being committed to the repository with a useful commit message, rather than one made up by the person who processes the checkin-needed and doesn't necessarily know what the patch does.
![]() |
Assignee | |
Comment 21•9 years ago
|
||
remove spaces per boris comment.
Attachment #8617750 -
Flags: review?(dbaron)
![]() |
Assignee | |
Comment 22•9 years ago
|
||
add "box-sizing: border-box;" to input["search"]. Following David's process. Thanks everyone for the guidance. Let's hope I didn't screw up things
Attachment #8617711 -
Attachment is obsolete: true
Attachment #8617751 -
Flags: review?(dbaron)
Comment on attachment 8617750 [details] [diff] [review] remove trailing spaces >Bug 1164783 - Removing trailing spaces. We usually write commit messages with verbs rather than nouns, so "Remove trailing spaces". r=dbaron
Attachment #8617750 -
Flags: review?(dbaron) → review+
Attachment #8617751 -
Flags: review?(dbaron) → review+
![]() |
Assignee | |
Updated•9 years ago
|
Keywords: checkin-needed
![]() |
Assignee | |
Comment 24•9 years ago
|
||
Thanks everyone for the guidance. Appreciated.
Updated•9 years ago
|
Assignee: nobody → kdubost
Comment 25•9 years ago
|
||
https://hg.mozilla.org/integration/mozilla-inbound/rev/9de887e53172 https://hg.mozilla.org/integration/mozilla-inbound/rev/f2602400179f
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/9de887e53172 https://hg.mozilla.org/mozilla-central/rev/f2602400179f
Status: NEW → RESOLVED
Closed: 9 years ago
status-firefox41:
--- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla41
Reporter | ||
Comment 27•9 years ago
|
||
(In reply to Wes Kocher (:KWierso) from comment #26) > https://hg.mozilla.org/mozilla-central/rev/9de887e53172 > https://hg.mozilla.org/mozilla-central/rev/f2602400179f Thanks everyone. When I submitted this little style problem, some people said this is just your problem and your CSS is not right. But Chrome and other browser working very well with that page, Firefox not.
You need to log in
before you can comment on or make changes to this bug.
Description
•