Last Comment Bug 1007454 - Regression: Text on buttons on Ikea website are cut off
: Regression: Text on buttons on Ikea website are cut off
Status: RESOLVED FIXED
[country-ca] [css]
: site-compat
Product: Tech Evangelism Graveyard
Classification: Graveyard
Component: English Other (show other bugs)
: Trunk
: All All
-- normal
: ---
Assigned To: english-other
:
:
Mentors:
http://www.ikea.com/ca/en/catalog/pro...
Depends on:
Blocks: 697451
  Show dependency treegraph
 
Reported: 2014-05-07 18:13 PDT by Kartikaya Gupta (email:kats@mozilla.com)
Modified: 2015-04-19 23:39 PDT (History)
8 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
some example buttons (442 bytes, text/html)
2014-05-07 21:28 PDT, David Baron :dbaron: ⌚️UTC-8
no flags Details

Description User image Kartikaya Gupta (email:kats@mozilla.com) 2014-05-07 18:13:28 PDT
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.
Comment 1 User image David Baron :dbaron: ⌚️UTC-8 2014-05-07 18:21:55 PDT
I'm curious why the text is being clipped (whereas it's not in Chromium).
Comment 2 User image David Baron :dbaron: ⌚️UTC-8 2014-05-07 18:22:16 PDT
(Happens on Linux as well.)
Comment 3 User image Boris Zbarsky [:bz] (still a bit busy) 2014-05-07 19:13:08 PDT
> whereas it's not in Chromium

Chrome ignores line-height on button inputs unless you set -webkit-appearance:none.
Comment 4 User image philippe (part-time) 2014-05-07 20:25:02 PDT
(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
Comment 5 User image David Baron :dbaron: ⌚️UTC-8 2014-05-07 21:07:27 PDT
ok, tech evang, then.  Thanks.
Comment 6 User image Boris Zbarsky [:bz] (still a bit busy) 2014-05-07 21:15:29 PDT
> 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...
Comment 7 User image philippe (part-time) 2014-05-07 21:24:04 PDT
(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
Comment 8 User image David Baron :dbaron: ⌚️UTC-8 2014-05-07 21:26:00 PDT
Do you think this is enough to want to back out the change
Comment 9 User image David Baron :dbaron: ⌚️UTC-8 2014-05-07 21:28:38 PDT
Created attachment 8419177 [details]
some example buttons

indeed, background flips something in Chromium on Linux
Comment 10 User image Boris Zbarsky [:bz] (still a bit busy) 2014-05-07 21:44:55 PDT
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.
Comment 11 User image Kohei Yoshino [:kohei] 2014-05-11 09:24:50 PDT
Found a contact in Bug 972374, so tweeted:
https://twitter.com/FxSiteCompat/status/465527511607414784
Comment 12 User image Kohei Yoshino [:kohei] 2014-06-02 14:12:03 PDT
Tweeted again https://twitter.com/FxSiteCompat/status/473572345261883392
Comment 14 User image Stormvision 2014-06-21 15:45:37 PDT
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.
Comment 15 User image Boris Zbarsky [:bz] (still a bit busy) 2014-06-21 19:31:31 PDT
It's pretty normal for websites.  :(
Comment 16 User image Karl Dubost :karlcow 2014-08-31 21:06:15 PDT
I don't see the issue.

Note You need to log in before you can comment on or make changes to this bug.