Home › Forums › Report Bugs › Safari iOS: Total canvas memory use exceeds the maximum limit

Safari iOS: Total canvas memory use exceeds the maximum limit

Viewing 6 posts - 1 through 6 (of 6 total)
  • February 7, 2019 at 11:42 pm #24245

    uniserve

    After rendering a free charts we got following Error on an iPad Safari:

    Total canvas memory use exceeds the maximum limit (576 MB).
    Na — canvasjs.min.js:20:210

    function Na(p, m, G) {
    if (s && ab) {
    var v = p.getContext(“2d”);
    Oa = v.webkitBackingStorePixelRatio ||
    v.mozBackingStorePixelRatio || v.msBackingStorePixelRatio || v.oBackingStorePixelRatio || v.backingStorePixelRatio || 1;
    ha = Ta / Oa;
    p.width = m * ha;
    p.height = G * ha;
    Ta !== Oa && (p.style.width = m + “px”, p.style.height = G + “px”, v.scale(ha, ha))
    } else
    p.width = m, p.height = G
    }

    Any Ideas?

    February 8, 2019 at 4:19 pm #24262

    Shashi Ranjan

    @uniserve,

    Can you please let us know the version of CanvasJS being used by you?

    Earlier WebKit allowed 448MB of canvas buffer memory whereas now they have dropped it to 224MB. Because of this, there was some memory issue with CanvasJS Charts in the latest iOS. However, we have optimized memory consumption in CanvasJS v2.3 – please check out this release blog for more info. Kindly download the latest version of CanvasJS Charts from our download page and let us know your feedback.

    If the issue still persists, kindly share sample project over Google-Drive or Onedrive, so that we can look into the issue and help you resolve it.

    ____
    Shashi Ranjan
    Team CanvasJS

    February 11, 2019 at 2:14 pm #24273

    uniserve

    We have the latest version 2.3 installed, no change.
    The error also occurs on your demo page if you leave many diagrams on one page (> 50).
    Is it possible to clear the Canvas memory on iOS device?

    February 12, 2019 at 10:52 pm #24303

    Shashi Ranjan

    @uniserve,

    Can you please share a sample project reproducing the issue you are facing over Google-Drive or Onedrive along with the OS details (Name and Version) so that we can understand the issue better and help you out.

    ____
    Shashi Ranjan
    Team CanvasJS

    February 13, 2019 at 2:25 pm #24314

    uniserve

    We use tested this on an

    iPad pro iOS Version 12.1.3,
    iPad pro iOS Version 12.1.4,
    iPhone 7 iOS Version 12.1.3,
    iPhone Xs iOS Version 12.1.3,
    iPhone Xs iOS Version 12.1.4

    always with Safari.

    Here is the Link to the demo Page http://dev.uniserve.de (Using chart.destroy()).
    Here is the Link to the demo Page http://dev.uniserve.de/test2.html (Using new chart object).

    To force the problem there are a the Buttons

    Here is the Code of an sample page :

    <html>
<head>
<script>
var renderNumber = 0;
var chart ;
window.onload = function () {

	chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	theme: "light1", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Render Test" 
	},
	data: [{
		type: "column", //change type to bar, line, area, pie, etc
		//indexLabel: "{y}", //Shows y value on all Data Points
		indexLabelFontColor: "#5A5757",
		indexLabelPlacement: "outside",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 92, indexLabel: "Highest" },
			{ x: 60, y: 68 },
			{ x: 70, y: 38 },
			{ x: 80, y: 71 },
			{ x: 90, y: 54 },
			{ x: 100, y: 60 },
			{ x: 110, y: 36 },
			{ x: 120, y: 49 },
			{ x: 130, y: 21, indexLabel: "Lowest" }
		]
	}]
});
chart.render();
}


function rerenderChart(number) {
	chart.destroy();
	if (number == null)
	{
		renderNumber = renderNumber + 1;
		number = renderNumber;
	}
	chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	theme: "light1", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Render " + number 
	},
	data: [{
		type: "column", //change type to bar, line, area, pie, etc
		//indexLabel: "{y}", //Shows y value on all Data Points
		indexLabelFontColor: "#5A5757",
		indexLabelPlacement: "outside",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 92, indexLabel: "Highest" },
			{ x: 60, y: 68 },
			{ x: 70, y: 38 },
			{ x: 80, y: 71 },
			{ x: 90, y: 54 },
			{ x: 100, y: 60 },
			{ x: 110, y: 36 },
			{ x: 120, y: 49 },
			{ x: 130, y: 21, indexLabel: "Lowest" }
		]
	}]
});
chart.render();
}
function rerenderChart10() {
	for (var i = 1; i <= 10; i++) {
		setTimeout(rerenderChart(),50000);
  }
}
function rerenderChart100() {
	for (var i = 1; i <= 100; i++) {
		setTimeout(rerenderChart(),50000);
  }
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 80%; width: 100%;"></div>
<div id="refreshPanel"><button onclick="rerenderChart()">Rerender once</button>
	<button onclick="rerenderChart10()">Rerender 10times</button>
	<button onclick="rerenderChart100()">Rerender 100times</button></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
    February 14, 2019 at 11:11 pm #24345

    Shashi Ranjan

    @uniserve,

    Thanks for sharing the details. You seem to be facing this issue because the WebKit has dropped the canvas buffer memory from 448MB to 224MB. Because of this, there was some memory issue with CanvasJS Charts in the latest iOS. However, we have optimized memory consumption in CanvasJS v2.3.1 and we will further optimize this in future versions.

    ____
    Shashi Ranjan
    Team CanvasJS

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.