Some buttons are unusually big on Meta

Contribute Bug

AI-generated summary

Users report that some buttons appear unusually large on the Meta forum, a bug that persists even in safe mode and is not reproducible on other forums. The issue is linked to browser font settings, specifically when the font size is set via chrome://settings/fonts or chrome://settings/appearance. hello-smile6 provided detailed system info, including a user-agent string and browser version, while 2 HamMan2118 confirmed the issue on Windows 11 and iPhone. Don identified the root cause as a recent CSS change (commit d0d4a363d4801a274caad50ffa509fc64740f238) that fails when the browser applies a custom font size, disrupting the max(1em, 16px) rule. david confirmed the fix by reverting the change (commit 8b935e5b33326d9a0fe943c49781592533a27355). supermathie humorously noted the issue with a meme referencing CSS styling challenges.

1

For some reason, some buttons are unusually big, even in safe mode, but this only seems to happen on Meta (I tried on other forums, and couldn’t reproduce the issue).

image
image1366×768 50.7 KB

Potentially relevant information:

  • user-agent string: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
  • Exact web browser version: 119.0.6045.209
  • Default font size (set on chrome://settings/fonts): 12
  • Minimum font size (set on chrome://settings/fonts): 0
  • Font size setting (set on chrome://settings/appearance): Small
  • Page zoom: 100% (still occurs at lower and higher zoom levels, though)
  • Display size: 1366x768
2 Likes
2

I can also repro this using Google Chrome on Windows 11

image
image735×681 18.8 KB

As well as on iPhone 13 Pro, running Chrome

image
image1170×1274 64.9 KB

1 Like
3

Thanks for the reports! Almost certainly related to UX: Make input sizing consistent across all browsers (#26159) · discourse/discourse@d0d4a36 · GitHub :eyes:

5 Likes
5

Hello :wave:

This commit is related. I can repro this if I change the browser font size with the methods you mentioned.
https://github.com/discourse/discourse/commit/d0d4a363d4801a274caad50ffa509fc64740f238

This is because the browser will apply the set font size to all text. So the max(1em, 16px) can’t work normally. :confused:

4 Likes
6

We’re reverting the change for now Revert "UX: Make input sizing consistent across all browsers (#26159)… · discourse/discourse@8b935e5 · GitHub

5 Likes
7

image
image1436×1080 111 KB

Peter Griffin, his CSS blinds unruly

5 Likes
8

This topic was automatically closed after 14 hours. New replies are no longer allowed.