Orientation change issue in Highcharts after navigating to an inner component | Winter '18 release

Question

I am facing an issue in iPad where the Highcharts width and height are not being reset after navigating to an inner component and changing the screen orientation and coming back.

Here's the code:-

Highchart's component:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <ltng:require scripts="{!join(',', 
                $Resource.l_staticresource + '/scripts/jQuery_V1.js', 
                $Resource.l_staticresource + '/scripts/highcharts.src.js',
                $Resource.l_staticresource + '/scripts/exporting.src.js',
                $Resource.l_staticresource + '/scripts/offline-exporting.src.js'
                    )}"
                  afterScriptsLoaded="{!c.afterLoad}" />


    <aura:attribute name="isResourcesLoaded" type="Boolean" default="false"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>


    <div aura:id="containerChart" id="container" style="height:600px; width: 90%; margin: 0 auto;">    
    </div>
</aura:component>

Controller:-

({
    doInit : function(component, event, helper) {
        helper.drawChart(component, helper);       
    },
    afterLoad : function(component, event, helper) {
        if(component.isValid()) {
            component.set("v.isResourcesLoaded", true);
        }
    }
})

Helper:-

({
    drawChart : function(component, helper) {
        if(component.isValid() && component.get("v.isResourcesLoaded")) {
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Stacked column chart'
                },
                xAxis: {
                    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total fruit consumption'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -30,
                    verticalAlign: 'top',
                    y: 25,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                        }
                    },
                    series: {
                                animation: false,
                                cursor: 'pointer',                                      
                                point: {
                                    events: {
                                        click: function () {
                                                helper.navigateToReport(component);
                                        }
                                    }
                                }
                            }
                },
                series: [{
                    name: 'John',
                    data: [5, 3, 4, 7, 2]
                }, {
                    name: 'Jane',
                    data: [2, 2, 3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, 2, 5]
                }]
            });
        }
    },
    navigateToReport: function(component) {
        var navigateToDrilldownEvent = $A.get("e.force:navigateToComponent");

        navigateToDrilldownEvent.setParams({
            componentDef: "c:HighchartsDemoDrillDown"            
        });
        navigateToDrilldownEvent.fire();
    }
})

Renderer:-

({
    afterRender: function(component, helper) {
        this.superAfterRender();
    },
    rerender: function(component, helper) {
        this.superRerender();   
        helper.drawChart(component, helper);
    }
})

HighchartsDemoDrillDown(Inner component) component:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <div class="slds-size_1-of-1 errorText">
        Now, when you change the orientation from here and click the back button, the Highchart's width and height does not change.
    </div>
    <div class="slds-size_1-of-1 errorText">
        This issue was not present prior to Salesforce Winter '18 release.
    </div>

</aura:component>

Steps to reproduce the issue:-

After clicking the chart, you are navigated to an inner component. From the inner component, when you change the screen's orientation and click the back button, the Highchart's width and height does not change. This issue was not present prior to Salesforce Winter '18 release.

I have created an unmanaged package to replicate the issue so that it would be easier to debug.

Here's the installation URL:- https://login.salesforce.com/packaging/installPackage.apexp?p0=04t0I000000qq09 (Please do not forget to add "HighchartsDemo" tab in Salesforce Navigation.)

Is there any workaround to fix this?