[wp-trac] [WordPress Trac] #47477: Open Content overflows and is cut off at 200% text enlarge

[WordPress Trac]

#47477: Open Content overflows and is cut off at 200% text enlarge
---------------------------------------------+----------------------------
 Reporter:  kjellr                           |       Owner:  (none)
     Type:  defect (bug)                     |      Status:  new
 Priority:  normal                           |   Milestone:  5.3
Component:  General                          |     Version:
 Severity:  normal                           |  Resolution:
 Keywords:  has-screenshots wpcampus-report  |     Focuses:  accessibility
---------------------------------------------+----------------------------

Comment (by kjellr):

 I've included the original Gutenberg screenshot from the report, as well
 as a couple other examples inside of WP-Admin, which are more relevant to
 this specific ticket.

 The WP-Admin screenshots were created with Firefox's Text Zoom option (set
 to 200%). @afercia notes that this is not exactly the same thing as the
 text zoom settings noted above, but it gives a general idea of the issue.
 [https://core.trac.wordpress.org/ticket/47115#comment:1 (reference)]


 ----

 [attachment:"47477.diff"] includes a quick pass at the updates here. It's
 a start, but is definitely not ready to land. Some notes:

 - In general, it aims to remove imposed heights for buttons, select
 fields, and number fields, in favor of `min-height`. This helps make sure
 these elements don't break when text is zoomed, but it's likely to cause
 some visual bugs as well.
 - For instance: `min-height` for `select` fields appears to be ignored in
 Safari. Which isn't great.
 - This patch also includes a quick fix for the checkboxes issue — It
 replaces the icon-font based checkmark with an SVG one which won't scale
 up and break. While switching to a SVG seems like a reasonable solution
 here (to me at least), this implementation could certainly be improved.

 With the patch applied, here are the updated screenshots:

 [[Image(https://cldup.com/iL0n4Z9Pyt-3000x3000.png)]]

 [[Image(https://cldup.com/rPnvS54rX1-3000x3000.png)]]

 [[Image(https://cldup.com/BLhjFxyBTv-3000x3000.png)]]

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