Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Series fade on legend tap with styled chart on mobile (probably extra mouseover event) #7418

RainerSchwarze opened this issue Nov 17, 2017 · 4 comments


Copy link

@RainerSchwarze RainerSchwarze commented Nov 17, 2017


When using the styled Highcharts version on a mobile platform, tapping on the legend items sometimes leads to all series faded out. It looks like an extra mouseover occurs, which triggers the hover behaviour for fading out the chart.

Expected behaviour

  • Tap on legend items does not fade series

Actual behaviour

  • Tap on legend items sometimes fades series

Live demo with steps to reproduce

When adding a log call to this snippet belonging to Interaction.js, one can see mouseover output in the console:

		// Set the events on the item group, or in case of useHTML, the item itself (#1249)
		(useHTML ? legendItem : item.legendGroup).on('mouseover', function () {

It looks like mouseover events are sometimes generated on mobile platforms in addition to the touch events. (As a quick test, I inserted if (hasTouch) return; and this "solved" the problem. Not sure, if this is appropriate.) A quick search lead me to this:, indicating it is a browser bug? (I did not dig any deeper so far)

Affected browser(s)

  • tested in Chrome 62 responsive mode
  • tested in iOS11 Safari (iPhone 6 plus)
Copy link

@pawelfus pawelfus commented Nov 20, 2017

Hi @RainerSchwarze

Thank you for reporting this issue. I can see how series fade out/in on Chrome+responsivne, tested also:

  • Android 6 + Chrome - works fine
  • iOS v11.1.2 + Safari - almost every tap on "Manufacturing" tex causes the issue
@pawelfus pawelfus added the Type: Bug label Nov 20, 2017
Copy link

@RainerSchwarze RainerSchwarze commented Nov 29, 2017

Hi @pawelfus,

I was looking around on how to "fix" this. I noticed, that in the Pointer module in setDOMEvents one could cancel the mouseover if it seems to be related to a touchstart. I did not yet test this in more detail. Something like this:

if (H.hasTouch) {
    // inserted code:
    container.addEventListener('touchstart', function(e) {
        this.xTouchEvent = {
            scrX: e.changedTouches[0].screenX,
            scrY: e.changedTouches[0].screenY,
            scrTS: e.timeStamp,
    container.addEventListener('mouseover', function(e) {
        var t = this.xTouchEvent;
        if (t) {
            if (
                Math.abs(e.screenX - t.scrX) <= 2 &&
                Math.abs(e.screenY - t.scrY) <= 2 &&
                Math.abs(e.timeStamp - t.scrTS) <= 200
            ) {
                console.log("stopped"); // test for me
    }, true);

What do you think about this? Would you already know of any problems this would cause?

I'm not yet sure about the thresholds (need more testing) and I did not yet test it in iOS Safari.
It seems to fix the problem in Chrome+responsive.

(While testing I noticed, that a very reliable way to reproduce the issue, is to tap right between two legend items.)

Copy link

@TorsteinHonsi TorsteinHonsi commented Dec 8, 2017


Copy link

@TorsteinHonsi TorsteinHonsi commented Dec 8, 2017

I fixed this simply by removing the active class name in the click event. Your fix looks valid too @RainerSchwarze, but I'm afraid it may break other functionality in unforeseen places.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants