Point's background color doesn't persist during mouse hover event (IE only)

[kamilkulig]

It happens only when tooltip.useHTML === true.

Expected behaviour

After hovering on a certain area on the map, it's color should be changed to hover state color and maintain as long as mouse remains inside this area.

Actual behaviour

After hover event within area (except hovering on the area label - then everything works fine) hover color appears as it should and immediately after that it changes back to unhover state color. When mouse is moved again just a bit, hover state color appears and disappears again.

Live demo with steps to reproduce

http://jsfiddle.net/primerano/m45h1ds5/

Hover mouse in any sate beyond the state name label. Don't move the mouse for a moment. Wait until color changes to unhover state color and move mouse again.

Affected browser(s)

IE, Edge

[TorsteinHonsi]

It comes from tooltip.useHTML.

Minimal demo:

http://jsfiddle.net/m45h1ds5/2/

[TorsteinHonsi]

In the OP's example there doesn't seem to be a reason for using HTML in the tooltip, so we can work around the issue by removing that option: http://jsfiddle.net/primerano/m45h1ds5/

[primerano]

I think I need useHTML in my application because the formatting is a bit more advanced than what I put in the fiddle but I'll see if I can get it to work.

What is an OP?

[KacperMadej]

@primerano OP - Original Poster, so in this case it would be kamilkulig. The demo is yours (judging from the firsts demo URL), so please feel to provide more info for the issue.

[primerano]

@KacperMadej / @TorsteinHonsi - my minimal example did not really need useHTML: true but in my application I have a tooltip that is a bit more advanced so I need useHTML as true.

For example, If I apply style to the tooltip, then useHTML true is required, Right? http://jsfiddle.net/m45h1ds5/4/

[KacperMadej]

@primerano There are some situation that require tooltip to has useHTML set to true, so the issue is an open bug issue and we will be working on resolving it.

[primerano]

Any chance we can get this fixed in 5.0.15? We have pages that depend on the hover event working correctly.

[TorsteinHonsi]

Thanks for your patience, we will have a closer look.

To rule out anything related to maps, here is issue reduced to a column chart: http://jsfiddle.net/highcharts/m45h1ds5/6/

[TorsteinHonsi]

The problem was that IE/Edge seems to fire mouseover and mouseout events for all the elements in the SVG below whenever the div containing the HTML tooltip moved by left and right CSS properties. So I fixed it by using the transform CSS property instead. Let hope that doesn't cause other problems.

[primerano]

Is this fix live somewhere were I can try it out? Maybe https://github.highcharts.com/hc5-fixes/...

[KacperMadej]

@primerano The fix was pushed into the master branch, so the code with the fix is here: https://github.highcharts.com/master/highcharts.src.js

[primerano]

i tried this locally and it looked good. will it be in the 5.0.15 release?

[sebastianbochan]

Currently we are developing 6.0 version which should be released within next weeks.

[primerano]

cool. thanks. Why so soon to 6.x? there isn't even a 5.1.x?

Is 6.x backwards compatible with 5.x ?

[pawelfus]

Yes, v6 is backward compatible with v5, we don't have plans to change the API.

[primerano]

can someone confirm that this fix will be in 6.0.0? The milestone is not set on this issue and I really need this fix before we launch our visualizations later this month.

Has the date for 6.0.0 been set?

@KacperMadej @sebastianbochan

[pawelfus]

Yes, it is part of the master branch so unless the fix cause any regressions it will be released. 6.0.0 should be released today/tomorrow.

[TorsteinHonsi]

This fix had to be reverted in bef82b80ce2b7983e217b479dc47728356ae6c54 due to various problems. We need to find a different workaround for Edge's problem.

[alejandrogih]

Thanks for this post, I was about to get crazy trying to figure this out.

I did a simulation for the useHtml with this: tooltip:{ enabled: true, headerFormat: '', style :{ color: '#000', fontSize: '25px' }, formatter: function() { return ''+this.point.name+'' } } Hopefully it works for someone else.

[blemaire]

Hi Everybody, just wondering if this was actively being looked at as I'm experiencing this bug too. Thanks

[KacperMadej]

Hi @blemaire

The issue is open and labelled as a bug. There's no ETA for the fix right now.

As a worka round - if you are not affected by the problematic side effects caused by the reverted fix - you could apply the reverted fix in a local version of Highcharts. https://github.com/highcharts/highcharts/commit/bef82b80ce2b7983e217b479dc47728356ae6c54

[baoshenyi]

Hello, the issue is still there since I am using version 6.1.0. any timeline for this bug fixing? Thanks lots, Shenyi

/ Highmaps JS v6.1.0 (2018-04-13) (c) 2011-2016 Torstein Honsi License: www.highcharts.com/license /

[KacperMadej]

Hi @baoshenyi

Fix was reverted in v6.0.5, so 6.0.4 should be the last version with the fix. You could use that or apply the fix as suggested in my previous comment based on the given commit. Currently there's no solution for the problem and there's no ETA for the fix.

When a new fix will be provided it will be added as a part of new code in a path update, so you will need to update to current code version - right now it's v7.0.1

[primerano]

@KacperMadej -- what were the problematic side effects of the reverted fix? I'm stuck on 6.0.4 until this issue is resolved. I'd love to start using 7.x

[KacperMadej]

@primerano The relevant issue with more info is here: https://github.com/highcharts/highcharts/issues/7529

[primerano]

@KacperMadej - if i downloaded the latest highstock and patched the highstock.src.js file, what do you use to generate the minified version (highstock.js) and corresponding map file?

I'd rather not modify the source code but I'm assuming that there is no plan to fix this issue in the near term.

[KacperMadej]

General guidelines are here, but maybe @TorsteinHonsi could point you to some more details as he knows all about release process.

[TorsteinHonsi]

I remember getting lost in this initial fix and the regressions after, so I'm starting from scratch trying to find a new workaround. So far, I've recreated the Edge issue without Highcharts, with the following ingredients:

• A group with a clip path and a mouseover handler
• An SVG element on top of that
• A div on top of the whole thing

https://jsfiddle.net/highcharts/3obv0zyk/37/

Now trying to find out what small thing we can change to avoid the bug

[TorsteinHonsi]

I now have a new proposal for a workaround. @primerano please try it out and see if it works for you.

• The Highcharts library: https://github.highcharts.com/bugfix/6957-point-state-flickering/highcharts.js
• The Highmaps library: https://github.highcharts.com/bugfix/6957-point-state-flickering/maps/highmaps.js
• The original posted demo with the fix applied: http://jsfiddle.net/highcharts/4j7w3m86/show

[primerano]

@TorsteinHonsi - thanks for trying to fix this. unfortunately I still see the issue on IE 11. It is fixed on Edge.

I suspect I'll need to support IE 11 for at least another year. I'm looking forward to the chromium based Edge browser. Life is going to be so much easier.. in about 4 years :-\

Let me know if you can get this working for IE 11.

Thanks! Tony

[TorsteinHonsi]

That's strange, for me it works in IE11. Which demo did you use?

I tested http://jsfiddle.net/highcharts/4j7w3m86/show and I see no flickering...

[primerano]

@TorsteinHonsi - if you hover on Texas away from the "TX" label the tooltip will disappear. This happens on other states too but it is easier to move off the label on Texas.

[TorsteinHonsi]

Hmmm. It's strange, that doesn't happen to me. The cursor flashes for a split second, but the tooltip stays.

[primerano]

@TorsteinHonsi here is video of it . note, if I hover the label it will persist but if you don't hit the "TX" label it disappears. IE11 only

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[primerano]

At this point I guess we can wait for the death of IE11. 😃

[Dergash]

I've encountered similar bug though on version 8.2.2 and tooltip.useHTML: false does not seem to fix it, though from the mechanics of it I believe it might be the same problem: hovering on map region does not show tooltip, introducing hideDelay shows tooltip but it still disappears after the delay.

I was able to fix it through monkey patching though I didn't delve deep into details about the bug; React example:

import Highcharts from 'highcharts'

/**
 * Limit fix to IE11
 */
const isIE11 = !!window.MSInputMethodContext && !!(document as any).documentMode

/**
 * Keep original handler
 */
const trickyHandler = (Highcharts.Pointer.prototype as any).onTrackerMouseOut

/**
 * Fix for tooltip not working on IE11 with Map charts
 *
 * Creates an effect where erroneously firing `onTrackerMouseOut` handler is mocked with empty function;
 * on component unmount restores original handler.
 */
export function useIE11Fix() {
    return React.useEffect(() => {
        if (!isIE11) {
            return
        }
        (Highcharts.Pointer.prototype as any).onTrackerMouseOut = mockTrackerMouseOut
        return () => {
            (Highcharts.Pointer.prototype as any).onTrackerMouseOut = trickyHandler
        }
    }, [])
}

/**
 * Do not switch to arrow function without explicitly passing `this`
 */
function mockTrackerMouseOut(e: React.MouseEvent<HTMLElement>) {
    if (isMapChart(e.relatedTarget as HTMLElement) || isMapChart(e.target as HTMLElement)) {
        return
    }
    return trickyHandler.call(this, e)
}

/**
 * Check if event is related to the Map to restrict the fix from affecting other charts
 *
 * Checks is based on searching through node ancestors for `.highcharts-map-series` 
 *
 * @param node Node to check
 */
function isMapChart(node: HTMLElement) {
    let parent = node.parentNode as HTMLElement
    while (parent) {
        if (parent.getAttribute?.('class')?.includes('highcharts-map-series')) {
            return true
        }
        parent = parent.parentNode as HTMLElement
    }
    return false
}

Mocking onTrackerMouseOut of course affects cases when it's fired legitimately e.g. tooltip will stay until you move out of the map container, but otherwise seems to be ok for us.