Note: There are a few cases of duplicates in user autocompletion which are being worked on.

Regression: Text on buttons on Ikea website are cut off

RESOLVED FIXED

Status

Tech Evangelism Graveyard
English Other
RESOLVED FIXED
3 years ago
2 years ago

People

(Reporter: kats, Unassigned)

Tracking

({site-compat})

Trunk
site-compat

Details

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

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

Comment 3

3 years ago
> whereas it's not in Chromium

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

Comment 4

3 years ago
(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

Comment 6

3 years ago
> 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

3 years ago
(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)
Created attachment 8419177 [details]
some example buttons

indeed, background flips something in Chromium on Linux

Comment 10

3 years ago
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)

Updated

3 years ago
Keywords: site-compat
Found a contact in Bug 972374, so tweeted:
https://twitter.com/FxSiteCompat/status/465527511607414784
Tweeted again https://twitter.com/FxSiteCompat/status/473572345261883392
They have replied

https://twitter.com/IKEACanada/status/476418963619196929
https://twitter.com/IKEACanada/status/476418987937775616

Comment 14

3 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.

Comment 15

3 years ago
It's pretty normal for websites.  :(
I don't see the issue.
Status: NEW → RESOLVED
Last Resolved: 3 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.