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

IE Edge - inline style "display: none;" overridden by Highcharts "display: block !important;" #6803

Closed
jackkhanjar opened this issue Jun 6, 2017 · 12 comments

Comments

@jackkhanjar
Copy link

@jackkhanjar jackkhanjar commented Jun 6, 2017

Expected behaviour

Container of the Graph with a style of display: none, should stay hidden in IE Edge.

Actual behaviour

Highcharts overrides the inline style with display: block !important;

Live demo with steps to reproduce

http://jsfiddle.net/xfucv9zn/5/

This appears to be a regression of issue #2631, introduced in 7a04838

Affected browser(s)

IE Edge

@KacperMadej
Copy link
Contributor

@KacperMadej KacperMadej commented Jun 6, 2017

Hi,

Thank you for reporting about the problem.

I am confirming that the offending commit is 7a04838

Last working version, since the regression, is 5.0.10. Demo: http://jsfiddle.net/xfucv9zn/6/

Another affected browser:
IE11

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Jun 9, 2017

The problem is that in IE and Edge, setting the display style back to "none" after previously setting it with the important flag doesn't work.

Broken down: https://jsfiddle.net/pend2y78/

@jackkhanjar
Copy link
Author

@jackkhanjar jackkhanjar commented Jun 9, 2017

Does this imply that you have no intention to resolve this regression for myself and other affected customers?

@pawelfus
Copy link
Contributor

@pawelfus pawelfus commented Jun 9, 2017

Hi @jackkhanjar

It's fixed and will be part of the next release. New GitHub design is confusing :) See above your comment:

TorsteinHonsi closed this in cd5fd0c an hour ago

@KacperMadej
Copy link
Contributor

@KacperMadej KacperMadej commented Jun 9, 2017

@jackkhanjar The solution could be tested when using the github version of Highcharts (next release candidate). Please check this demo (notice script src pointing to github.highcharts.com): http://jsfiddle.net/xfucv9zn/7/

I have tested this on IE11 and Edge and chart is not visible - as it should, so the problem is resolved. However, please let us know if the fix is not working for you, so we could improve it.

@TorsteinHonsi
Copy link
Collaborator

@TorsteinHonsi TorsteinHonsi commented Dec 18, 2017

The Edge issue seems to be fixed as of Edge 16.

@khilangoel
Copy link

@khilangoel khilangoel commented Jan 6, 2018

Hi, I am still facing this issue in Internet Explorer. I am using highcharts version: 6.0.4? Is it fixed only for Edge?

@pawelfus
Copy link
Contributor

@pawelfus pawelfus commented Jan 8, 2018

Hi @khilan2goel - could you post a live demo with this issue? Just tested with this demo: http://jsfiddle.net/xfucv9zn/5/ on IE 11.192.16299.0 and it works fine.

@mateuszlajming
Copy link

@mateuszlajming mateuszlajming commented Jan 29, 2018

It looks like the issue still exists. I encountered this problem when moving from Highcharts version 5.0.10 to 5.0.14.

Consider a little bit more complicated example: http://jsfiddle.net/xfucv9zn/21/.

In this example the div with the 'graph-container' class has a parent div which also has display style set to 'none'. This causes the 'graph-container' div to get the 'block !important' style. Which, as you will see, is never changed back to 'none' (at least not in IE or Edge).

After that we remove the 'none' display style from the parent div (see the setTimeout function call).

Expected behavior is that the chart is not shown. But when run with Highcharts 5.0.14 the highchart is shown due to the display style 'block !important' which is stuck and can't be changed back to 'none'.

When run with Highcharts 5.0.10 it works as expected and the chart is not shown.

As someone mentioned earlier in the comments it looks like there is a problem with setting the display style back to 'none' after previously setting it with the important flag in the IE and Edge.

(I was using Edge v. 40 and IE 11)

@KacperMadej
Copy link
Contributor

@KacperMadej KacperMadej commented Jan 31, 2018

@mateuszlajming

The problem is that it's not possible to override a style property if it's priority is important in IE11. It should be first removed and then it's possible to set it (without !important). I'm not sure if this won't break anything in other browsers, so for now only a workaround is provided.

Demo: http://jsfiddle.net/BlackLabel/du9djhwz/7/

Edge v. 41 seems to be working correctly without the workaround.

The workaround doesn't break anything on tested so far:

  • Chrome (63) / Win10 & / OSX (10.11.16)
  • IE11 / Win10
  • Edge (41) / Win10
  • Firefox (57 & 58) / Win10
@iniatse
Copy link

@iniatse iniatse commented Feb 4, 2020

Obviosouly removing the style asstribute is not a very good solution but just a workaround in case there's no other solution. Why does highcharts even alter elements where highcharts has no business at all?

@KacperMadej
Copy link
Contributor

@KacperMadej KacperMadej commented Feb 4, 2020

Hi @iniatse

The case is old and closed. Please provide more details about your qestion, info about used browsers (with versions), OS name and version and a live demo of the problem that you have.

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

Successfully merging a pull request may close this issue.

None yet
7 participants