min
min copied to clipboard
Input height difference on Firefox Mobile
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?
is that being caused by the inner padding that firefox adds to many of it's form elements?
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.
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!
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!
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!
@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 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.
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
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.