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 · 10 comments

Comments

Projects
None yet
6 participants
@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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jun 6, 2017

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jun 9, 2017

Collaborator

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/

Collaborator

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

This comment has been minimized.

Show comment
Hide comment
@jackkhanjar

jackkhanjar Jun 9, 2017

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

jackkhanjar commented Jun 9, 2017

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

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Jun 9, 2017

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jun 9, 2017

Contributor

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

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Dec 18, 2017

Collaborator

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

Collaborator

TorsteinHonsi commented Dec 18, 2017

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

@khilan2goel

This comment has been minimized.

Show comment
Hide comment
@khilan2goel

khilan2goel 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?

khilan2goel 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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Jan 8, 2018

Contributor

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.

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@mateuszlajming

mateuszlajming 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)

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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jan 31, 2018

Contributor

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

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/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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment