Tooltip leaves shadows when hovering over points on Safari

[KamilKubik]

Expected behaviour

Tooltip with the split property shouldn't leave shadows when hovering over points.

Actual behaviour

Tooltip with the split property leaves shadows when hovering over points. The more defined points, the clearer it is to see the issue.

Live demo with steps to reproduce

https://jsfiddle.net/BlackLabel/mqe7ko0L/

Product version

Highcharts v11.0.0

Last working version: Highcharts v10.3.3

Affected browser(s)

Safari v16.4

[karolkolodziej]

Internal note:
Tested on Safari v15.5 and there was no issue but with Safari v16.4 this issue is visible.
Unable to bisect.

[chrisrodkey]

I do not get this kind of behavior when I disable the "shadow" property via:

  tooltip: {
        shadow: false
    },

Just my own experience, though. I would prefer to not have to rely on this workaround; I like the shadows!

[TorsteinHonsi]

Internal note
Some background on the issue. The change in v11 is that we moved away from the old shadow approach which was to generate multiple SVG elements in a stack behind the tooltip, with different opacities. This originates from way back when support for SVG filters was sketchy. With v11, we implement shadows through SVG filters, like we have previously only done with styled mode.

Unfortunately we see the same issue in v10, styled mode: https://jsfiddle.net/ohrnpw0d/1/ .

This issue clearly indicates it is not a bug in the Highcharts logic per se, but rather a rendering issue with SVG in Safari. It can be tricky to work around those, but we can try and see if we can make the browser redraw more of the chart. Interestingly, the issue doesn't appear when the tooltip is not split. Maybe the animation has something to do with it. Split tooltips are not animated by default.

[TorsteinHonsi]

Workaround 1

Drop in this snippet to force a redraw of the whole group when moving the tooltips:

// Drop-in fix for https://github.com/highcharts/highcharts/issues/18927
Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    this.label.attr({
        opacity: this.label.opacity === 1 ? 0.999 : 1
    });
});

View it live on jsFiddle

Workaround 2

The problems seem to be gone when setting outside: true.

    tooltip: {
        shadow: false,
        outside: true
    },

[TorsteinHonsi]

Reported to WebKit: https://bugs.webkit.org/show_bug.cgi?id=256411