radio buttons are no longer centered when OS scaling is set to 125%

[Presskopp]

My system:

Windows 11, Screen Resolution 1920x1080, Scale 125%

To reproduce:

On the WP dashboard settings screen, or wherever there are radio buttons around, the center point gets randomly out of place, when the scale is set to anything higher than 100%

The issue is reproducable using the ​playground, under v6.9.1 and v7RC3 as well.

[joedolson]

This seems to be related to the -.25rem top margin, but it's a bit obscure to me exactly what's going on here and what the best way to resolve it might be.

It's likely that there are some measurements that aren't increasing in size evenly, but removing that margin fixes the problem. However, when you remove that margin, it's falling back (in the above context, screenshot) to a -4px margin instead, and I wouldn't generally expect that to be an improvement. It'll probably need a bit more time to look at.

[Presskopp]

I'm also struggling to find the perfect solution, but let me say that disabling the line

margin: -0.25rem 0.25rem 0 0; (forms.css)

is fixing the issue.

[joedolson]

Just disabling that line also screws with the alignment of checkboxes, however, so it's not quite that simple. But that was basically my observation, as well.

[siliconforks]

Replying to Presskopp:

I'm also struggling to find the perfect solution

I'm not sure there is a perfect solution, since once you start zooming you start dealing with fractional pixels so you may not get a pixel-perfect layout any more. But I think the current CSS can probably be improved...

but let me say that disabling the line

margin: -0.25rem 0.25rem 0 0; (forms.css)

is fixing the issue.

Are you sure that line is really related to the problem? The issue is that it's off by a pixel, and removing that line does nudge it a pixel in the right direction, so it appears to "fix" the issue, but I think that's just a coincidence that happens to work at 125% zoom but is not really solving the problem. (For example, at 150% zoom, removing that line actually seems to make things worse.)

I think the main problem with the CSS is that the code for centering assumes that the border is always 1px, but that is not true when zooming.

​https://stackoverflow.com/questions/32184316/html-border-thickness-on-zoom
​https://stackoverflow.com/questions/33769989/border-size-change-if-i-zoom-the-page
​https://patrickbrosset.com/articles/2024-06-21-invasion-of-the-border-snappers/

(The last article doesn't actually talk about zoom - it talks about device pixel ratios - but I think the principle applies to zoom as well.)

[siliconforks]

I've attached a couple of alternative proposals to improve the CSS.

64816-remove-border.patch simply removes the border entirely (instead of setting it to the same color as the background).

64816-flexbox.patch keeps the border but uses flexbox for centering instead of trying to figure out the exact value required for the margin.

[suhan2411]

I can reproduce this issue locally on trunk.

If helpful, I’d be happy to investigate and propose a patch.

This PR extends the patch by @siliconforks to remove some additional CSS.

The class .tog is used only on the adim theme color switching and in the selector to set the front page between a page or a post. Removing these styles appears to have no impact. The line-height also appears to now be irrelevant.

Some additional cross-browser testing would probably be beneficial.

Trac ticket: https://core.trac.wordpress.org/ticket/64816

## Use of AI Tools

None

[joedolson]

I have a definite preference for the flex approach, as it simplifies the approach conceptually and effectually. I added a PR that extends that patch a bit, as it appears there are some additional styles that can also be removed with this change.

The class .tog is used only on the adim theme color switching and in the selector to set the front page between a page or a post.

Should tog be removed from the HTML code too?

That class is extremely ancient and it doesn't currently seem to serve any purpose (if it ever did).

https://core.trac.wordpress.org/changeset/3581

I checked CSS, but i didn't check whether it was used in JS anywhere. It might be possible to remove; that will need a bit more checking. It's definitely very old!

I removed the .tog classes from their inputs; I couldn't find any representation in JS, and removing them did not impact functionality.

The radio buttons are now centered when the display scale is set to 125%.✅

Before	After

[sabernhardt]

The .tog class should not be necessary anymore.

• [2746] created a script that relied on .tog for Permalink settings, but [22122] removed the class from elements on that page, and [22931] changed the selector to .permalink-structure input:radio (which is how it is now in ​common.js).
• [3581] added the class to static page radio buttons in Reading Settings.
• [7249] added the class to radio buttons for Profile color scheme.
• [7259] applied CSS for color scheme radio buttons.
• Since merging MP6 in [26072], .tog has had the same styling as any other radio button.

[joedolson]

Thanks for the detailed research, @sabernhardt!

[joedolson]

In 62089:

Administration: Fix radio button selection alignment.

Fix issue where the selected state dot on radio buttons was not centered when scaling is set to a value greater than 100%. Remove the .tog class and styles, unused since [26072].

Props presskopp, siliconforks, suhan2411, sabernhardt, shailu25, joedolson.
Fixes #64816.