Fixing a Bug in Low-Resolution Mode

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 …


The post Fixing a Bug in Low-Resolution Mode appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

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:

See how the icon is just… riding low?

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:

Checked box for “Open in Low Resolution”

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;
}


The post Fixing a Bug in Low-Resolution Mode appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.


Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-28T23:48:36+00:00) » Fixing a Bug in Low-Resolution Mode. Retrieved from https://www.scien.cx/2021/06/30/fixing-a-bug-in-low-resolution-mode/.
MLA
" » Fixing a Bug in Low-Resolution Mode." Chris Coyier | Sciencx - Wednesday June 30, 2021, https://www.scien.cx/2021/06/30/fixing-a-bug-in-low-resolution-mode/
HARVARD
Chris Coyier | Sciencx Wednesday June 30, 2021 » Fixing a Bug in Low-Resolution Mode., viewed 2024-03-28T23:48:36+00:00,<https://www.scien.cx/2021/06/30/fixing-a-bug-in-low-resolution-mode/>
VANCOUVER
Chris Coyier | Sciencx - » Fixing a Bug in Low-Resolution Mode. [Internet]. [Accessed 2024-03-28T23:48:36+00:00]. Available from: https://www.scien.cx/2021/06/30/fixing-a-bug-in-low-resolution-mode/
CHICAGO
" » Fixing a Bug in Low-Resolution Mode." Chris Coyier | Sciencx - Accessed 2024-03-28T23:48:36+00:00. https://www.scien.cx/2021/06/30/fixing-a-bug-in-low-resolution-mode/
IEEE
" » Fixing a Bug in Low-Resolution Mode." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/06/30/fixing-a-bug-in-low-resolution-mode/. [Accessed: 2024-03-28T23:48:36+00:00]
rf:citation
» Fixing a Bug in Low-Resolution Mode | Chris Coyier | Sciencx | https://www.scien.cx/2021/06/30/fixing-a-bug-in-low-resolution-mode/ | 2024-03-28T23:48:36+00:00
https://github.com/addpipe/simple-recorderjs-demo