WordPress.org

Make WordPress Core

Opened 9 months ago

Last modified 8 months ago

#39891 new defect (bug)

Chrome rendering issue with Customizer, widgets, and checked radios

Reported by: joelworsham Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Customize Keywords: needs-patch
Focuses: ui Cc:

Description

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:
http://d.pr/i/WEil+

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

Example showing how setting the position on the .widget item to static fixes things:
http://d.pr/i/4P9a+

Change History (2)

#1 @afercia
9 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release
  • Version trunk deleted

Nice catch @joelworsham. Reproduced using Easy Digital Downloads "Download Details" widget, which contains both radio buttons and checkboxes, but yep, see it happens just with the Chrome-specific radio buttons styling.
Setting overflow: hidden on the container seems to fix it too, but it also slightly cut's off the radio buttons focus style.

#2 @stevengliebe
8 months ago

For additional confirmation, I'm seeing this with non-EDD widgets in multiple themes. Any widget with a radio input seems to be affected the same.

Note: See TracTickets for help on using tickets.