Image disappears on certain resolutions after fast zooming with mouse wheel

I use OpenLayers to explore big tile-based images using Zoomify source. And I started noticing that sometimes image can disappear while zooming out with mouse wheel (scroll down). It wasn’t easy to reproduce, because the behavior is flaky. And the behavior is more stable on ‘non-standard’ images (tile size 1536x1536 and the image is vertically stretched)

Steps to reproduce the behavior:

1. Go to the example http://cssdeck.com/labs/csrch2es
2. Move the mouse point to the approximate center
3. Zoom out to 1 step with mouse-wheel
4. If image didn’t disappear try multiple times. Maybe it depends on mouse position or some race conditions, I don’t know. But mostly it disappears, when the mouse position is in the center, and if not - image gets zoomed out properly.

Here is also a video, where I reproduce it: https://screenpresso.com/=sUmyc Unfortunately the fact that mouse wheel is scrolled is not visible there.

Any ideas, solutions and even workarounds are welcome. You can play with the code here http://cssdeck.com/labs/csrch2es, but collapse all the panels and make the working area as big as possible. It’s easier to reproduce, when the available space is wider.

Also you here is easier to reproduce http://68.183.68.22/index.html. Don’t forget to keep your cursor around center of the image before you zoom out.

    const size = [12375, 38162];
    const tileSize = 1536;
    const tilesUrl = `http://68.183.68.22/ol-issue-red/{z}/{x}/{y}`;

    const maxZoomLevel = 5;

    const view = new ol.View({
        center: [size[0] / 2, -size[1] / 2]
    });

    var map = new ol.Map({
        controls: ol.control.defaults().extend([
            new ol.control.OverviewMap(),
            new ol.control.ScaleLine()
        ]),
        interactions: ol.interaction.defaults({ mouseWheelZoom: false, }).extend([new ol.interaction.MouseWheelZoom({ duration: 0, timeout: 0 }),]),
        target: 'map',
        renderer: 'canvas',
        view: view
    });

    const zoomifySource = new ol.source.Zoomify({
        tierSizeCalculation: 'truncated',
        size: size,
        tileSize: tileSize
    });

    zoomifySource.setTileUrlFunction((tileCoordinate, pixelRatio, proj) => {
        const z = maxZoomLevel - (tileCoordinate[0]);
        const res = tilesUrl
            .replace('{z}', (z).toString())
            .replace('{x}', (tileCoordinate[1]).toString())
            .replace('{y}', (((-tileCoordinate[2]) - 1)).toString());
        return res;
    });

    zoomifySource.setTileLoadFunction((tile, url) => {
        fetch(url, { method: 'GET', })
            .then(response => { return response.blob(); })
            .then(function (blob) { tile.getImage().src = URL.createObjectURL(blob); });
    });

    map.addLayer(new ol.layer.Tile({ source: zoomifySource }));

    const extent = [0, -size[1], size[0], 0];
    const calculatedResolution = map.getView().getResolutionForExtent(extent);
    view.setResolution(calculatedResolution);

[ahocevar]

Like I said, when zooming out while no lower resolution data is available, the resulting image is oversampled. This requires a larger canvas, and some browsers have a canvas size limit.

The url function change is expected, see https://github.com/openlayers/openlayers/blob/master/changelog/upgrade-notes.md#new-internal-tile-coordinates.

The new release will be out in a few weeks. A beta is already available as npm package with npm install ol@beta.

[ahocevar]

Please try to set up and reproduce your demo with v6. You can use https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/master/build/ol.js for a version that uses the new renderer already.