Fixing a Bug in Low-Decision Mode

No Comments

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.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment