Regression: Text on buttons on Ikea website are cut off

RESOLVED FIXED

Status

defect
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: kats, Unassigned)

Tracking

({site-compat})

Dependency tree / graph

Firefox Tracking Flags

(firefox29 unaffected, firefox30 affected, firefox31 affected)

Details

(Whiteboard: [country-ca] [css] , )

Attachments

(1 attachment)

See the page in the bug URL. On the right side of the page are two buttons, labelled "Buy online" and "Save to list". Except that the text is cut off so that you can only see the tops of the letters in FF 30 and up. In FF 29 the whole text is visible.

I inspected the page and it appears that the <input type="button"> that holds the text has a line-height:1px !important attribute set, and removing that fixes the problem. Based on this I suspect this is a regression from bug 697451 and is intentional.

Putting this in layout for the moment but assuming we don't want to undo bug 697451 this should be moved to evangelism.
I'm curious why the text is being clipped (whereas it's not in Chromium).
(Happens on Linux as well.)
OS: Mac OS X → All
Hardware: x86 → All
> whereas it's not in Chromium

Chrome ignores line-height on button inputs unless you set -webkit-appearance:none.
(In reply to Boris Zbarsky [:bz] from comment #3)

> Chrome ignores line-height on button inputs unless you set
> -webkit-appearance:none.

That is not true for input[type="button/submit"], only for select. At least in Safari 6 & 7. That said, on the affected page, Safari is 'saved' by the specified height on the button, something I don't see specified in Firefox (tested: nightly).

@media screen and (-webkit-min-device-pixel-ratio:0) {
    div.buttonContainer a input { 
        height:22px; 
        margin:0; 
    }
line 7291 -- note the MQ…
http://www.ikea.com/ms/css/css_main.css
ok, tech evang, then.  Thanks.
Assignee: nobody → english-other
Component: Layout: Form Controls → English Other
Product: Core → Tech Evangelism
Version: 30 Branch → Trunk
> That is not true for input[type="button/submit"], only for select.

Er... It's quite true for <input type="button">.

> At least in Safari 6 & 7.

I see the same exact behavior in Safari 7 on Mac.  The testcase I'm using is:

  <!DOCTYPE HTML>
  <input type="button" value="something">
  <input type="button" value="something" style="line-height: 1px;">
  <input type="button" value="something" style="line-height: 100px;">

and both Chrome and Safari show those three buttons as having identical heights.

Note that I just checked Safari 5.1 (which is what I have on Windows) and that _does_ honor line-height on windows on button inputs.  It does not honor it on Mac.

Just checked Chrome 34 on Windows, and it doesn't honor the line-height on button inputs either.  Neither does Chrome 22...
(In reply to Boris Zbarsky [:bz] from comment #6)
> > That is not true for input[type="button/submit"], only for select.
> 
> Er... It's quite true for <input type="button">.
> 

Eh, you have to style it with border or background
Do you think this is enough to want to back out the change
Flags: needinfo?(bzbarsky)
indeed, background flips something in Chromium on Linux
With background styled, I agree that the behavior is similar to the -webkit-appearance:none behavior in Safari and Chrome.  Complete with lack of native theming.

As far as backing out... if this is the only report, I'm willing to try leaving it in.
Flags: needinfo?(bzbarsky)

Comment 14

5 years ago
Just wondering if I was the only Firefox user on Ikea website, to notice that bug... Glad I'm not. But still, in 2 months (at least) they haven't fixed it? It's ridiculous.
It's pretty normal for websites.  :(
I don't see the issue.
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Whiteboard: [country-ca] [css]
Product: Tech Evangelism → Tech Evangelism Graveyard
You need to log in before you can comment on or make changes to this bug.