Border broken at the bottom of bubbles for bubble chart

[tjn-financial-com]

Expected behaviour

Bubbles should have a border around them without any break. (stroke-width: 1px)

Actual behaviour

The bubble border has a small break(gap) at the bottom.

Live demo with steps to reproduce

https://jsfiddle.net/cu1kvyfL/

Product version

Highcharts JS v11.3.0

Affected browser(s)

Chrome

[bm64]

Hello @tjn-financial-com

I tested the demo but couldn't reproduce the issue. Can you please provide more details like your system, browser, and browser version? Thanks in advance.

[tjn-financial-com]

Hi @bm64 ,

I'm using Windows 10 Enterprise,
Browser: Chrome Version 121.0.6167.162

Please note that the issue is not visible if you hover the bubble.

For me, the issue is visible in the official demo page for bubble charts.

Thank you!

[bm64]

@tjn-financial-com, thanks! Does this issue occur only when the browser is zoomed in or out? I was able to recreate it only at 90% zoom.

[tjn-financial-com]

@bm64, it happens without any zoom.

Thanks!

[bm64]

@tjn-financial-com you're right, this happens also on a default zoom. Thanks for all those informations. You could try increasing marker.lineWidth just slightly, it seems to do the trick on my end: https://jsfiddle.net/BlackLabel/h26z71bk/

[tjn-financial-com]

@bm64 , thanks for the suggestion. I tried setting stroke-width: 1.1px for .highcharts-point since I use styledMode and it worked.