min icon indicating copy to clipboard operation
min copied to clipboard

Input height difference on Firefox Mobile

Open owenversteeg opened this issue 10 years ago • 9 comments

Screenshot

GRAAAH

I'm going to put this off to Min 2.5 as it's an extremely small visual bug that affects a very small number of people. Plus I can't find a fix that doesn't take up a lot of space. Any suggestions?

owenversteeg avatar Aug 01 '14 22:08 owenversteeg

is that being caused by the inner padding that firefox adds to many of it's form elements?

scottaohara avatar Aug 02 '14 00:08 scottaohara

I just tested it on Firefox 30 OSX and Firefox 30 Linux and Firefox 30 Windows and neither displayed the same bug, so I doubt it. Besides, we reset a bunch of stuff on inputs which should take care of that.

owenversteeg avatar Aug 02 '14 00:08 owenversteeg

Maybe it's the font-size not inheriting well? It looks perfect on my browser, Firefox Aurora on Linux, but when I add 'font: inherit' to that input field I get the same visual bug. Strange, but may be something fun to look into!

jakeburden avatar Sep 15 '14 13:09 jakeburden

This is on Firefox Mobile and doesn't seem to affect any other Firefoxes, so I'm not surprised it works on Aurora.

What you said about the font is interesting though - I'll look into it when I get home, thanks!

owenversteeg avatar Sep 15 '14 17:09 owenversteeg

Yeah I don't own a device with Firefox Mobile, but still wanted to see if there was anyway to help out by trying to break it on my version of FF, cheers!

jakeburden avatar Sep 15 '14 17:09 jakeburden

@owenversteeg I'm seeing the same issue on Firefox 35.0a on Linux. It doesn't happen if I zoom in by 1 level (110%). If there's any testing I can do, let me know.

calzoneman avatar Sep 15 '14 22:09 calzoneman

@calzoneman Hmm, weird. What distro do you use, and what font does the input end up using? If you can't visually identify it I'd check in FF settings or use something like the WhatFont bookmarklet. Since I can't reproduce what you're seeing hopefully you can do some minor debugging for me: try changing the font size, input padding, font family, and anything else you think would work.

@JacobJWBurden My Windows box is acting up so I don't think I'll be able to test FF mobile today - hopefully I'll get it working and test it tomorrow. Thanks for the help though! P.S. What distro do you use and what font is the input? I'd check the default sans-serif font in FF settings or use a bookmarklet like WhatFont to figure it out.

owenversteeg avatar Sep 16 '14 00:09 owenversteeg

I'm using Arch Linux with the Infinality font rendering patches for fontconfig. My sans-serif font (which is used in the textbox) is DejaVu Sans.

The following are what I've tried on the input box that fixed it:

  • Manually override font to Liberation Sans (I'd rather not do this permanently; relying on a specific font family in order to have it align properly seems like a bad idea)
  • Set font-size: 10pt

calzoneman avatar Sep 16 '14 01:09 calzoneman

My original post was from a Ubuntu 13.10 box, I'm currently on using Ubuntu 14.04. Looks good on both distros. It's rendering DejaVu Sans for me as well.

My guess would be to experiement with 'font: inherit' on both the span and input, that has in interesting effect. But obviously the point of this framework is to stay as small as possible, so there may need to be more testing.

jakeburden avatar Sep 16 '14 01:09 jakeburden