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

Rendering chart in a hidden container and with box-sizing #6617

Closed
pawelfus opened this Issue Apr 20, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@pawelfus
Contributor

pawelfus commented Apr 20, 2017

Expected behaviour

The chart should be rendered the same was as when rendering in a visible container.

Actual behaviour

Width and height is miscalculated in getChartSize.

Live demo with steps to reproduce

Two different results, both wrong:

Note:
When cloning the container, we don't apply all of the CSS rules for this container, for example: #parent .container will not be applied. Combining this with padding and box-sizing: border-box results with miscalculated size for the chart.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Apr 24, 2017

Collaborator

I'm not sure if there is a good fix for this at all... In order to keep all inherited CSS we would need to avoid cloning. Which would be good for performance too. See http://jsfiddle.net/highcharts/8e056mb2/2/.

In complex layouts this will probably result in a blink, but maybe that could be avoided by adding position:relative or other CSS tricks...

Collaborator

TorsteinHonsi commented Apr 24, 2017

I'm not sure if there is a good fix for this at all... In order to keep all inherited CSS we would need to avoid cloning. Which would be good for performance too. See http://jsfiddle.net/highcharts/8e056mb2/2/.

In complex layouts this will probably result in a blink, but maybe that could be avoided by adding position:relative or other CSS tricks...

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Apr 24, 2017

Contributor

Well, the workaround is rather simply: just set CSS directly on the container, not using relative paths. The only problem is it's not easy to debug the issue (it took me about hour to find out what's happening, but I didn't have the access to CSS/JS - remote debugging).

I was thinking about copying over all computed CSS (not paths). For example: http://jsfiddle.net/8e056mb2/3/ (of course, this should happen before setting position/top/display).

Contributor

pawelfus commented Apr 24, 2017

Well, the workaround is rather simply: just set CSS directly on the container, not using relative paths. The only problem is it's not easy to debug the issue (it took me about hour to find out what's happening, but I didn't have the access to CSS/JS - remote debugging).

I was thinking about copying over all computed CSS (not paths). For example: http://jsfiddle.net/8e056mb2/3/ (of course, this should happen before setting position/top/display).

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Apr 25, 2017

Collaborator

I think that would be complicated and error prone, also due to different browser implementations of current style. The definately simplest and fastest approach would be to avoid cloning, but we need to temporarily make the chart visible without being visible to the eye. I'm pushing a fix where we temporarily give all the hidden parents height: 0 and overflow: hidden. It has been tested with the known fail cases.

This is more or less the same approach as we're doing in 'Chart.print' where we isolate the chart by hiding all other children of the body, then reset them when the print is finished. It is a bit risky to modify the DOM like that, but is has been stable in the exporting module so it should be okay.

Collaborator

TorsteinHonsi commented Apr 25, 2017

I think that would be complicated and error prone, also due to different browser implementations of current style. The definately simplest and fastest approach would be to avoid cloning, but we need to temporarily make the chart visible without being visible to the eye. I'm pushing a fix where we temporarily give all the hidden parents height: 0 and overflow: hidden. It has been tested with the known fail cases.

This is more or less the same approach as we're doing in 'Chart.print' where we isolate the chart by hiding all other children of the body, then reset them when the print is finished. It is a bit risky to modify the DOM like that, but is has been stable in the exporting module so it should be okay.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment