Opened 9 years ago
Last modified 5 years ago
#39891 new defect (bug)
Chrome rendering issue with Customizer, widgets, and checked radios
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Future Release | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Customize | Keywords: | needs-patch 2nd-opinion |
| 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
.widgetelement position tostatic(previously set torelative)
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:
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: hiddenon the container seems to fix it too, but it also slightly cut's off the radio buttons focus style.