Strange Icons in background of multiselect checkboxes in scrollable datatables

[bje]

Hello all,
I have some webapps with JSF2.2 and Primefaces 6.0.
Since the last Chromium Browser update from this week for Chrome (115.0.5790.110) and Edge I have a strange behaviour in datatables defined as scrollable and with multiselect checkboxes.
Datatables with paging do not show this behaviour.

In the background of the checkboxes of the first 9 rows of the table, some strange icons (or part of a picture, I'm not sure) are displayed.
Always only in the first 9 rows and if there are less than 9 rows everything is ok.
The checkboxes are working correctly for all rows, so it is just a matter of the displayed background.
The webpage sourcecode for the select column is the same for tables and rows with or without the problem.
So maybe it has to do with the background of the scrollable table(?).

Has anyone else encountered that problem or knows about the reason or even has a workaround or solution for it?
Thanks for any help or ideas.

[jepsar]

PrimeFaces 6 is quite old. Did you try with 13?

[bje]

Meanwhile I have seen that the same occurs for RadioButtons in scrollable Tables.
I did some tests with Primefaces 10. The problem is no longer present in this version and supposedly also in higher versions.

However with the build-in themes in Version 10 my styles and skins are partially no longer effective and the design of the pages is therefore completely broken.
Since I maintain several webapps with this problem, I have to discuss this issue with the Application Manager if we can spend the effort for adapting the design and retest the webapps with a new Primefaces version.

For datatables a possible workaround could be to change it to pagination or scroll the whole page instead of the table.
But the problem also occurs in Multiselect Controls ( e.g. selectCheckBoxMenu), which cannot be changed.

Im still wondering how a change in the rendering machine of chromium can lead to such a strange behaviour.

[jepsar]

It's not that strange. jQuery UI uses a background images sprite.

[Melloware]

It was answered on Stack Overflow by Woanni. https://stackoverflow.com/questions/768 ... e-multiple

It seems like the browsers have updated recently and some CSS that used to hide this is no longer hiding it and he provides a CSS workaround.

[bje]

Hello Melloware,

thanks for the link.
I have tried the different workarounds via CSS adaption that were mentioned there.
Unfortunately none of the combinations worked for me.
But I haven't given up yet

[bje]

Hello all,

after investigating the used styles of the Primefaces theme for the controls I found a solution, which at least worked for me.
The problem was that the complete sprite image was displayed if the checkbox or radiobutton was not selected.
This is because the sprite was also selected for the blank (unselected) control.

Therefore I only overwrote the position of the displayed icon on the sprite.
I chose an empty position on the sprite, so that an empty background was shown.

Add to CSS file:
.ui-icon-blank { background-position: -192px -16px; }

[nehakakar]

Experiment with different scrollable options for the datatable. For example, try using "scrollHeight" instead of "scrollable" to see if the issue persists.