Massive performance issues with huge maps on modern mobile devices caused by Canvas

Discussed in https://github.com/openseadragon/openseadragon/discussions/2097

<div type='discussions-op-text'>

^{Originally posted by liveman1 January 22, 2022} Hi,

I have massive performance issues for huge maps on modern mobile devices (iPad air 4, iPhone 12), not being able to pan & zoom properly. When zooming in to a detailed section performance is great again. So this happens only on the initial zoom level with the entire image loaded. There are no issues on older devices like iPhone SE or iPhone 11. Thus, I guess this is related to the higher resolution of modern displays trying to load & handle the image in a much higher resolution.

I build a huge map from DZI files like this:

    var viewer = OpenSeadragon({
        id: "genes",
        tileSources: "genes.dzi",
        ...
        });
	
viewer.addTiledImage({
      	tileSource: 'g1.dzi',
	    x: 0.1,
	    y: 0.1,
	    width: 0.01
	});  
viewer.addTiledImage({
      	tileSource: 'g2.dzi',
	    x: 0.2,
	    y: 0.1,
	    width: 0.01
	});  
viewer.addTiledImage({
      	tileSource: 'g3.dzi',
	    x: 0.3,
	    y: 0.1,
	    width: 0.01
	});  
...
viewer.addTiledImage({
      	tileSource: 'g100.dzi',
	    x: 0.9,
	    y: 0.9,
	    width: 0.01
	});  

Thanks a lot!</div>

[liveman1]

Thanks a lot for your help! I will try to prepare an abstracted version & provide it to you.

[iangilman]

@liveman1 Glad to hear we’re making progress here. Interesting you mentioned loading tiles… That reminds me there are two different kinds of performance for OSD: the pan/zoom animation frame rate and the tile loading speed. I’ve been assuming we’re talking about the frame rate, but now you’re mentioning the loading speed. Did I misunderstand, or are they both issues in this scenario?