Make WordPress Core

Opened 7 years ago

Last modified 3 years ago

#39891 new defect (bug)

Chrome rendering issue with Customizer, widgets, and checked radios

Reported by: joelworsham's profile joelworsham Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Customize Keywords: needs-patch 2nd-opinion
Focuses: ui Cc:


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:

Example showing why I think it's some sort of "max paint width" rendering issue:

Example showing how setting the position on the .widget item to static fixes things:

Change History (3)

#1 @afercia
7 years 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
7 years 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.

#3 @celloexpressions
3 years ago

  • Keywords 2nd-opinion added

Can anyone still reproduce this? I cannot reproduce with Chrome 90 on Windows.

This will also probably no longer be relevant with widgets being replaced with blocks in 5.8.

Note: See TracTickets for help on using tickets.