[wp-trac] [WordPress Trac] #64816: radio buttons are no longer centered when OS scaling is set to 125%

[WordPress Trac]

#64816: radio buttons are no longer centered when OS scaling is set to 125%
-------------------------------------------------+-------------------------
 Reporter:  Presskopp                            |       Owner:  joedolson
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  normal                               |   Milestone:  7.0
Component:  Administration                       |     Version:  trunk
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots needs-patch admin-   |     Focuses:  css
  reskin                                         |
-------------------------------------------------+-------------------------

Comment (by siliconforks):

 Replying to [comment:6 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.)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64816#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform