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

[jackkhanjar]

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]

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

[KacperMadej]

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]

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/

[TorsteinHonsi]

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]

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

[jackkhanjar]

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

[pawelfus]

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

[pawelfus]

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]

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

[KacperMadej]

@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]

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

[TorsteinHonsi]

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

[khilan2goel]

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

[khilan2goel]

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]

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.

[pawelfus]

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]

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)

[mateuszlajming]

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]

@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/1/

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

[KacperMadej]

@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/1/

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