Chart grows on window resize in styled mode

[DiegoCardoso]

This behavior is only affecting Highcharts in styled mode.
If container has no explicit height defined, Highcharts is created with a height of 400px.

Expected behaviour

Chart should keep its initial height whenever a new resize event occurs.

Actual behaviour

Chart keeps growing after any resize event (whether by resizing the window or by dispatching a new Event('resize'))

Live demo with steps to reproduce

http://jsfiddle.net/diegocardoso/c88n2o2w/1/

Affected browser(s)

Tested on latest versions of Chrome, Firefox and Safari.
Tested on latest Highcharts 5 and 6.

[sebastianbochan]

Hi @DiegoCardoso
Thank you for the reporting.

It looks like the problem is with the functions getStyle / getChartSize().
Related issue: #4913

[sebastianbochan]

Hi @DiegoCardoso
Thank you for the reporting.

It looks like the problem is with the functions getStyle / getChartSize().
Related issue: #4913

[DiegoCardoso]

I just noticed that if I call getChartSize() it seems to stop growing on resize. Not sure why, though.

http://jsfiddle.net/diegocardoso/c88n2o2w/2/

[DiegoCardoso]

I just noticed that if I call getChartSize() it seems to stop growing on resize. Not sure why, though.

http://jsfiddle.net/diegocardoso/c88n2o2w/2/

[TorsteinHonsi]

Cause

Here you see what failed - the SVG is rendered as an inline image so the space below the baseline is added to the container. Subsequently, the container offsetHeight is a little bit higher on every redraw: http://jsfiddle.net/highcharts/c88n2o2w/4/

Preliminary workaround

Add this snippet to your CSS

.highcharts-root {
    display: block;
}

[TorsteinHonsi]

Cause

Here you see what failed - the SVG is rendered as an inline image so the space below the baseline is added to the container. Subsequently, the container offsetHeight is a little bit higher on every redraw: http://jsfiddle.net/highcharts/c88n2o2w/4/

Preliminary workaround

Add this snippet to your CSS

.highcharts-root {
    display: block;
}

[DiegoCardoso]

Thanks!

That also explains why the HC height was 403px by "default".

This seems to fix it.

[DiegoCardoso]

Thanks!

That also explains why the HC height was 403px by "default".

This seems to fix it.