3
\$\begingroup\$

Here's what it looks like on Win7, Chrome 45.0.2454.85, 1304x660 viewport:

enter image description here

Similar issue in Firefox 40 and IE 11, yet it underflows instead of overflowing.

Fix: remove that useless one-cell <table> from markup and set

width: 100%;
box-sizing: border-box;

to your <input>. Thanks.

\$\endgroup\$
  • \$\begingroup\$ Aside, note that the width on the input is set: it's 30, which means 30em. Do you perhaps have your OS or browser's font size increased? \$\endgroup\$ – SevenSidedDie Sep 23 '15 at 23:51
  • \$\begingroup\$ @SevenSidedDie Well, setting size="27" fixed the issue. The reason we see this difference is that under no circumstances size attribute should be used to set the width. \$\endgroup\$ – polkovnikov.ph Sep 24 '15 at 0:09
  • \$\begingroup\$ No, if we're using the same browser to render the same code, a point of design philosophy is unlikely to be causing an difference in output. I don't think the browser pays attention to the design philosophy of its user. Likely the source is in some actual, quantifiable difference in the setups of the two environments. \$\endgroup\$ – SevenSidedDie Sep 24 '15 at 0:12
  • \$\begingroup\$ i.imgur.com/QsTHgvr.png I can confirm it actually looks like this on an un-zoomed-in chrome window. Can we clean up some of the chatty comments? (this is win 10, chrome 45.something, 1920*1080) \$\endgroup\$ – Tritium21 Sep 25 '15 at 5:10
  • \$\begingroup\$ @SevenSidedDie It's been 1.5 years, and this bug is still present. \$\endgroup\$ – polkovnikov.ph Mar 31 '17 at 7:58
  • \$\begingroup\$ I'm not development staff. \$\endgroup\$ – SevenSidedDie Mar 31 '17 at 14:52
1
\$\begingroup\$

Yeah, this is yet another case of input field / textarea widths measured in ems being wildly inconsistent across different browser, OS and installed font combinations.

I've added the CSS fix suggested by polkovnikov.ph into the next version of my SOUP user script. (It's already in the development branch, and yes, you've been credited.) Since I can't actually get rid of the useless <table> with CSS, I just tweaked the selector to also apply the same styles to the table too:

.new-login-form .new-login-right input,
.new-login-form .new-login-right table {
    width: 100%;
    box-sizing: border-box;
}
\$\endgroup\$
  • \$\begingroup\$ Shouldn't it be something like .new-login-form > .new-login-right > input? Juxtaposition operator A B in selectors means "all descendants of A that are B", and it's not as performant as A > B i.e. "all children of A that are B". \$\endgroup\$ – polkovnikov.ph Oct 3 '15 at 19:30
  • \$\begingroup\$ I've never heard of SOUP, but I'll certainly get one now. \$\endgroup\$ – polkovnikov.ph Oct 3 '15 at 19:31
  • \$\begingroup\$ You've got a point, but here there are a whole bunch of <div> and <tr> and <td> and other tags there in between, so using direct child selectors would make the selector really messy (not to mention fragile, if SE ever removes that useless table or changes the HTML in some other minor way). \$\endgroup\$ – Ilmari Karonen Oct 3 '15 at 19:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .