Opened 8 years ago
Last modified 4 years 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 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
.widget
element 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: hidden
on the container seems to fix it too, but it also slightly cut's off the radio buttons focus style.