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

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

Open
kamilkulig opened this issue Jul 13, 2017 · 36 comments
Open

Comments

@kamilkulig
Copy link
Contributor

@kamilkulig kamilkulig commented Jul 13, 2017

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

@kamilkulig kamilkulig changed the title Point's background color doesn't persist after mouse hover (IE only) Point's background color doesn't persist during mouse hover event (IE only) Jul 13, 2017
@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Jul 18, 2017

It comes from tooltip.useHTML.

Minimal demo:

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

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Jul 18, 2017

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
Copy link

@primerano primerano commented Jul 18, 2017

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
Copy link
Contributor

@KacperMadej KacperMadej commented Jul 19, 2017

@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
Copy link

@primerano primerano commented Jul 25, 2017

@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
Copy link
Contributor

@KacperMadej KacperMadej commented Jul 25, 2017

@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
Copy link

@primerano primerano commented Sep 1, 2017

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

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Sep 4, 2017

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
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Sep 4, 2017

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
Copy link

@primerano primerano commented Sep 5, 2017

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

@KacperMadej
Copy link
Contributor

@KacperMadej KacperMadej commented Sep 6, 2017

@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
Copy link

@primerano primerano commented Sep 14, 2017

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

@sebastianbochan
Copy link
Contributor

@sebastianbochan sebastianbochan commented Sep 15, 2017

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

@primerano
Copy link

@primerano primerano commented Sep 15, 2017

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
Copy link
Contributor

@pawelfus pawelfus commented Sep 20, 2017

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

@primerano
Copy link

@primerano primerano commented Oct 2, 2017

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
Copy link
Contributor

@pawelfus pawelfus commented Oct 3, 2017

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
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Dec 18, 2017

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

@alejandrogih
Copy link

@alejandrogih alejandrogih commented Mar 7, 2018

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
Copy link

@blemaire blemaire commented Jul 2, 2018

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

@KacperMadej
Copy link
Contributor

@KacperMadej KacperMadej commented Jul 2, 2018

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. bef82b8

@baoshenyi
Copy link

@baoshenyi baoshenyi commented Jan 16, 2019

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
Copy link
Contributor

@KacperMadej KacperMadej commented Jan 16, 2019

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
Copy link

@primerano primerano commented Mar 1, 2019

@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
Copy link
Contributor

@KacperMadej KacperMadej commented Mar 1, 2019

@primerano
The relevant issue with more info is here: #7529

@primerano
Copy link

@primerano primerano commented Mar 5, 2019

@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
Copy link
Contributor

@KacperMadej KacperMadej commented Mar 7, 2019

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

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Mar 8, 2019

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
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Mar 11, 2019

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

@primerano
Copy link

@primerano primerano commented Mar 11, 2019

@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
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Mar 12, 2019

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
Copy link

@primerano primerano commented Mar 12, 2019

@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
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Mar 13, 2019

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

@primerano
Copy link

@primerano primerano commented Mar 13, 2019

@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

HighchartsDemoJSFiddleInt

@stale
Copy link

@stale stale bot commented Sep 17, 2020

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!

@stale stale bot added the Status: Stale label Sep 17, 2020
@circleci-mu circleci-mu added this to To do in Development-Flow via automation Sep 17, 2020
@primerano
Copy link

@primerano primerano commented Sep 20, 2020

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

@stale stale bot removed the Status: Stale label Sep 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants