Heatmap shrinks to 1" square on mobile phone

1

A Highcharts heatmap occasionally (e.g. every 7 to 10 times the tab is entered) shrinks to a 1" square in the upper left corner. The chart is in a ion-tab.

If the phone is positioned to a landscape mode from the original portrait mode the heatmap is now drawn correctly. Then continues to be drawn properly in either mode until once again when the heatmap tab is entered it shrinks to a 1" square.

What call can be made (similar to the call made when the phone is moved to a landscape position) for a workaround to this bug? The issue does not occur when the app is run in the web browser.

HTML:

...

CSS:
.heatmap {
height: 100%;
width: 100%;
position:absolute;
}

JS:
$scope.graphDraw= function () {
try {
$scope.heatmap = $scope.servers.heatmapLevelsDefinition();
catch (e) {
$log.debug('ERROR: Heatmap graph draw: ’ + e); } // no error is ever reported in the catch clause
}

2

HELP! need to find a workaround or solution to this terrible issue.

Have a 5 tab ion-tabs app.

One of the tabs is a highcharts heatmap and another a highcharts line graph.

If a $ionicPopover or $ionicModal is ever displayed then thereafter when the heatmap tab is entered the heatmap shrinks (is displayed as) to a 1" square and is never again drawn again over the entire screen. The underlying data (graph values) has not changed during the tab selection and modal displays. Never occurs with the line chart.

Using the latest version of all highcharts required libraries per the below. Using Ionic 1.1.0 and latest CLI.

Occurs always in the Windows/Android/Chrome debugger, Mac/browsers,
on Apple IOS 8/IOS 9 mobile devices, on Android mobile devices.