Fixing a Bug in Low-Decision Mode

I used to be engaged on a bug ticket the opposite day the place it was reported that an icon was sitting low in a button. Simply not aligned prefer it ought to be. I needed to go on a bit of journey to determine learn how to replicate it earlier than I may repair it. Lemme set the scene.

Right here’s the screenshot:

See how the icon is simply… driving low?

However I am going to have a look at the button on my machine, and it appears to be like completely high-quality:

What the heck, proper? Identical platform (macOS), similar browser (Firefox), similar model, every little thing. Different folks on the staff seemed too, and it was high-quality for them.

Then a discovery! (Thanks, Klare.)

It solely confirmed up that method on her low-resolution exterior monitor. I don’t know if “low” is honest, but it surely’s not the “retina” of a MacBook Professional, no matter that’s.

My drawback is I don’t also have a monitor anymore that isn’t excessive decision. So how I can check this? Perhaps I simply… can’t? Nope! I can! Test it out. I can “Get Information” on the Firefox app on my machine, and verify this field:

Checked field for “Open in Low Decision”

Now I can actually see the bug. It’s distinctive to Firefox so far as I can inform. Maybe one thing to do with pixel… rounding? I don’t know. Right here’s a diminished check case of the HTML/CSS at play although.

The answer? Slightly than utilizing an inline-block show kind for buttons, we moved to inline-flex, which appears like the right show kind for buttons due to how good flexbox is at centering.

.button {
/* one million issues so that every one buttons are excellent and… */

show: inline-flex;
align-items: middle;
}

The submit Fixing a Bug in Low-Decision Mode appeared first on CSS-Tips. You possibly can help CSS-Tips by being an MVP Supporter.