[wp-trac] [WordPress Trac] #39891: Chrome rendering issue with Customizer, widgets, and checked radios

[WordPress Trac]

#39891: Chrome rendering issue with Customizer, widgets, and checked radios
--------------------------+-----------------------------
 Reporter:  joelworsham   |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Customize     |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:  ui            |
--------------------------+-----------------------------
 Steps to reproduce:

 - Open up Chrome (at least on Mac, have not tested on PC)
 - Open up the Customizer
 - Edit any sidebar
 - Add any widget '''that contains at least one radio field that is
 checked'''
 - Reduce the height of the browser window until a vertical scrollbar
 appears in the pane

 Once the vertical scrollbar appears, the entire pane vanishes.

 Upon further investigation, it appears to be Chrome "max-width paint" type
 issue. Basically, the checked radio element sets a `text-indent` of
 `-9999px` on the `:before` item to hide the browser rendered checkmark. It
 seems that this expands the width of the painted area very very far to the
 left (outside the visible window). I say this because if you mess around
 with the indent by lowering it, eventually the bug disappears. You can
 even see the right side of the painted area vanish (screencast attached
 showing this below).

 Here's some CSS changes I tried that fixed it:

 - Lower the text-indent to something higher (as in smaller negative
 number) than about `-8000px`
 - Set the `.widget` element position to `static`
  (previously set to `relative`)

 Here's some screencasts:

 Detailing how to create the bug:
 [[Image(http://d.pr/i/WEil+)]]

 Example showing why I think it's some sort of "max paint width" rendering
 issue:
 [[Image(http://d.pr/i/gLzq+)]]

 Example showing how setting the `position` on the `.widget` item to
 `static` fixes things:
 [[Image(http://d.pr/i/4P9a+)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/39891>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform