Poor performance in Safari and Chrome on iPhone 6

I am a relatively new developer currently working on building a digital exhibit for the Georgia Tech Library. I am using OSD to display user submitted art.

Here is the demo and here is the branch it was deployed from. The images are stored in /public/images/iiif and the viewer is created in /public/js/slider.js. The pertinent lines are 91-123 and 179-225. Essentially, the OSD viewer is created when a user selects an image from the slider, and then the viewer is destroyed when they close the viewer.

I have had no problem with performance in Firefox, Chrome, or Edge on a Macbook Air or a Surface Pro. I have, however, been experiencing some poor performance when opening the viewer on my iPhone 6. Initially, when panning and zooming, the performance is fine; however, the movement becomes “jerky” whenever I try and move the image. When tested in Firefox, the FPS average is just a little under 60.

On that same phone, I experienced the same jerky performance when viewing the examples on openseadragon.github.io . However, the performance is excellent when viewing this image from the Art Institute and Saint Clair Cemin from Artsy.

At this point, I have tried both .dzi and iiif (currently trying iiif). I have increased the tile size and overlap with no change. As you’ll see from my code, I created my own static iiif tiles and serve both my website and the images from the same server. I’m afraid the performance might be a result from my server set up, but I really don’t have enough experience or expertise to know whether or not that is true.

When I was testing using iiif, I started with only one image and had no issues when testing on my iPhone. However, once I added the rest of the images, the performance drop returned.

I hope I’ve provided enough info. I will be really, really grateful if you all have any recommendations. Thanks!!

[PoorBillyPilgrim]

Since submitting this issue, I resolved the performance issue totally by beginning the viewer initialization with fetch.

Originally, the viewer was initialized by passing the id of the image to tileSource:

        viewer = OpenSeadragon({
            id: 'openseadragon',
            prefixUrl: '/images/openseadragonNav/',
            tileSources: [{
                tileSource: '/images/dzi/' + id + '.dzi'
            }],
            viewportMargins: {
                right: 300
            },
            overlays:[{
                id: 'html-overlay',
                x: 1,
                y: 0,
            }]
        });

This resulted in a jerky performance on mobile. Then, to solve a different issue, I needed to grab the image size the .dzi’s XML file to precisely place the HTML overlay. I used fetch to grab the image size info and then pass it to the viewer:

        fetch('/images/dzi/' + username + '.dzi')
            .then(response => response.text())
            .then(string => $.parseXML(string))
            .then(xml => {
                let sizeTag = xml.documentElement.firstElementChild.attributes;
                let height = parseInt(sizeTag.Height.value);
                let width = parseInt(sizeTag.Width.value);
                return y = height / width;
            })
            .then(y => {
                // ....
                OpenSeadragon.pixelDensityRatio = 1;
                viewer = OpenSeadragon({
                    id: 'openseadragon',
                    prefixUrl: '/images/openseadragonNav/',
                    tileSources: [{
                        tileSource: '/images/dzi/' + username + '.dzi'
                    }],
                    immediateRender: true,
                    viewportMargins: {
                        right: right,
                        bottom: bottom
                    },
                    overlays:[{
                        id: 'html-overlay',
                        x: x,
                        y: y,
                    }]
                });
            })
            .catch(err => console.log(err));

After doing this, the performance improved totally. I’m new to developing and to OpenSeadragon, but I think the issue was that the viewer wasn’t loading the tiles quickly enough for Safari. The viewer and tiles live on the same server, so it didn’t occur to me originally that the issue might be due to a delay. But really, I don’t have the technical knowledge to know what exactly was at issue.

[iangilman]

Great! It’s not a perfect solution, since it makes it not possible to use keyboard commands. If we can figure out something that gets us the best of both worlds, we can incorporate it into OSD. I suppose one option would be to do something like this on mobile (where we don’t care about the keyboard, and where the slowness is more dramatic) and leave it off for desktop (though of course that wouldn’t help with desktop Safari). Ideally, though, we would get to the bottom of why it’s happening and target that mechanism directly.

At any rate, I’ve updated the CodePen with a cleaner version of this same solution:

// Note that this will prevent people from using keyboard combos with OSD, since it removes keyboard focus as soon as it is set
viewer.canvas.addEventListener('focus', function() {
  viewer.canvas.blur();
});