I was working on a bug ticket the other day where it was reported that an icon was sitting low in a button. Just not aligned like it should be. I had to go on a little journey to figure out how to replicate it before I could fix it. Lemme set the scene.
Here’s the screenshot:
But I go to look at the button on my machine, and it looks perfectly fine:
What the heck, right? Same platform (macOS), same browser (Firefox), same version, everything. Other people on the team looked too, and it was fine for them.
Then a discovery! (Thanks, Klare.)
It only showed up that way on her low-resolution external monitor. I don’t know if “low” is fair, but it’s not the “retina” of a MacBook Pro, whatever that is.
My problem is I don’t even have a monitor anymore that isn’t high resolution. So how I can test this? Maybe I just… can’t? Nope! I can! Check it out. I can “Get Info” on the Firefox app on my machine, and check this box:
Now I can literally see the bug. It is unique to Firefox as far as I can tell. Perhaps something to do with pixel… rounding? I have no idea. Here’s a reduced test case of the HTML/CSS at play though.
The solution? Rather than using an inline-block display type for buttons, we moved to inline-flex, which feels like the correct display type for buttons because of how good flexbox is at centering.
.button {
/* a million things so that all buttons are perfect and... */
display: inline-flex;
align-items: center;
}
You could probably just change page zoom in Firefox to 50% or so. Or temporarily switch the entire OS (if macOS supports that) to 100% zoom instead of 200% or whatever it has by default on HiDPI displays.
inline-flexorinline-gridwith thegapproperty set is a nice way to handle buttons with icons as well as you don’t need to worry about where the icon is (before or after text) and the spacing and vertical alignment just works.I also got this bug, but not on low resolution. So i used
.button {display: inline-flex;
align-items: center;
}
Thanks for the post :D
ya me too
I loaded the test case and was surprised to see that there was a vertical misalignment in Chrome: the text was not centered. First I played around with the display and internal sizing of the button, but that didn’t work. Wrapping the text in different tags and adjusting the css for the wrapper didn’t work either. I then changed the text to uppercase, in the event that descenders were to blame. Even with uppercase text, it was still too high in the button. I removed the SVG, tested the text in mixed and uppercase, and it was still misaligned. I adjusted the font to be arial and then verdana, and that fixed the issue, whether the svg was present or not. So font-choice or at least the way fonts are displayed from one computer to the next makes a difference.
I had not realized that display: inline-flex was a thing until recently.
This article, if correct, says that display: inline-flex; should have no effect on the children within the button, and only serves to make the parent element display as inline:
https://stackoverflow.com/questions/27418104/whats-the-difference-between-displayinline-flex-and-displayflex#27459133
So why do you suppose it worked in your case?
It worked in my case because it very much DID “have effect on children within the button”. But I was going from a non-flex container (inline-block) to a flex container (inline-flex).
I’ve noticed this with several buttons I used icons with and never understood why… Now I know, as I always keep my development window on my MacBook Pro and preview on external display. I’ve found that clicking styled input fields causing them to be slower on external displays as well. As soon as you move the window to primary display they behave properly.
Btw, your logo effect is awesome! Scrolling up gets me every time. Like the ding of an elevator when you’ve reached your floor. Great detail!
I ran into this same issue and found that it was dependent on the font I was using as well. I was not able to switch to a different font so I ended up using a
max-resolutionmedia query to add a margin that aligns my text on low resolution screens.Every time I dig into font rendering shenanigans I grow a gray hair.