Primefaces 5.2 - p:selectManyCheckbox rendering unnecessary icons

Question

We have had this application for many years. But suddenly this issue cropped up. The checkboxes have these unwanted icons out of the blue. Not sure what went wrong. This issue appeared in all DEV/UAT/PROD environments, even without any recent deployments. So I am guessing something to do with CSS/FA Icons which is getting updated live. But I am not sure where to look/start.

code snippet below :

<ul class="list-group filterby">
                    <li class="list-group-item subtitle">By Metal</li>
                    <li class="list-group-item"><p:selectManyCheckbox
                            layout="grid" columns="1"
                            value="#{physicalProductBean.selectedCurrencyPair}"
                            valueChangeListener="#{physicalProductBean.selectedCurrencyChanged}">
                            <f:selectItems
                                value="#{physicalProductBean.availableCurrencyPairsProduct}"
                                var="eachCurrency" itemLabel="#{eachCurrency.symbol}"
                                itemValue="#{eachCurrency.id}" />
                            <p:ajax update=":physicalProductForm:productListing"></p:ajax>
                        </p:selectManyCheckbox></li>
                </ul>

Any solutions/suggestions highly appreciated

Answer 1

The problem occurs since a few weeks ago, with PrimeFaces < 7 (the newer ones use a font instead of background-image, so no issue). To reproduce you could use a theme with border-radius, for ui-icon class. Basically, the problem is with every checkbox, and with ui-icon-blank, here's an example:

span {
    display: block;
    margin-top: 0em;
    width: 16px;
    height: 16px;
}
.ui-chkbox-icon.ui-icon {
    border-radius: 10px;
}
.ui-chkbox-icon.ui-icon {
    overflow: visible;
}
.ui-icon {
    display: block;
    vertical-align: baseline;
    margin-top: 0;
}
.ui-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -0.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}
.ui-icon-blank {
    background-position: 16px 16px;
}
.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(https://mostre.cab.unipd.it/index/static/jquery/jquery-ui/jquery-ui-bootstrap/images/ui-icons_454545_256x240.png);
}

<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>
<span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> <- only on Chrome/Edge<br/>

Here's some workarounds overriding css (I think the clean solution is open a bug to Chrome):
Remove border-radius

.ui-chkbox-icon.ui-icon.ui-icon-blank,.ui-radiobutton-icon.ui-icon.ui-icon-blank {
    border-radius: 0px;
}

Remove backgroud-repeat

.ui-chkbox-icon.ui-icon.ui-icon-blank,.ui-radiobutton-icon.ui-icon.ui-icon-blank {
    backgroud-repeat: unset;
}

Remove background-image for ui-icon-blank

.ui-chkbox-icon.ui-icon.ui-icon-blank,.ui-radiobutton-icon.ui-icon.ui-icon-blank {
    background-image: none;
}

Depending on your css/theme, you could need to add !important or adapt to your need.

EDIT:

The problem apply also to radio buttons, so I updated the above workarounds.