Expected Behavior

Hovering a bubble should apply the effects according the config (hoverRadius, hoverBackground etc.), but only on the visible part of the bubble. A bubble can be partially visible, if as an example, another smaller bubble is on the same coordinates,

Current Behavior

The smaller bubble is covered by the hovered bubble. It seems like the hovered bubble is drawn again, but this time over the other, smaller bubble.

Example:
https://codepen.io/nwi4/pen/zYdVzdR
Hovering the blue bubble will cover the red one completely.

Note: This happens only if the bubbles are in the same dataset. The bubbles have to be in the same dataset in my case, because of issue #9127 (this way I can sort the bubbles according their size and can ensure that the smallest bubble is drawn last (on top of all other bubbles).

Environment

• Chart.js version: 3.6.0
• Browser name and version: Chrome 96