raster-fade-duration is ignored after v4.2.0

JacobJeppesen commented 1 week ago

maplibre-gl-js version: Working version: 4.2.0 Bug versions: 4.3.0 to 5.0.0-pre6 (latest version I tested)

browser: Chrome Version 130.0.6723.91 on Ubuntu 22.04.

Steps to Trigger Behavior

Create a simple map with OpenStreetMap layer.
Set raster-fade-duration to 5000 (or a high number so the fade should be very clear).
Load the map. With 4.2.0 it slowly fades in, and with 4.3.0 and later it immediately appears.

Link to Demonstration

https://jsbin.com/qozahopeci/edit?html,output . The map should slowly fade in. Then change the versions in the code to 4.3.0 and run again. Now the map immediately appears.

Expected Behavior

Map should slowly fade in, and when panning around, the newly loaded tiles should slowly fade in too.

Actual Behavior

Map immediately appears, and when panning around, the newly loaded tiles immediately appear.

Possible explanation

I haven't gone through the code, but I think the bug could be related to https://github.com/maplibre/maplibre-gl-js/pull/4072. It looks like the top gif in the post has tiles which fade in, where the tiles in the gif below immediately appears. The two gifs are before/after the changes in the pull request.

Code for Demonstration

Paste the code below into https://jsbin.com. The map should slowly fade in. Then change the versions in the code to 4.3.0. Now the map immediately appears.

<!DOCTYPE html>
<html>
<head>    
    <style>
        #map { height: 100vh; }
    </style>
</head>
<body>
    <div id="map"></div>
    <link href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.2.0/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4.2.0/dist/maplibre-gl.js"></script>
    <script>
        new maplibregl.Map({
            container: "map",
            style: {
                version: 8,
                sources: {
                    "osm-tiles": {
                        type: "raster",
                        tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
                        tileSize: 256,
                    },
                },
                layers: [{
                    id: "osm-layer",
                    type: "raster",
                    source: "osm-tiles",
                    paint: {
                        "raster-fade-duration": 5000,
                    },
                }],
            },
            center: [8.0745, 56.5789],
            zoom: 11,
        });
    </script>
</body>
</html>

HarelM commented 1 week ago

Thanks for taking the time to report this issue and suggest what might have been the PR that broke the behavior. @wagewarbler can you take a look at this and see if the PR you made caused this issue?

wagewarbler commented 3 days ago

FYI this is on my radar to look into. Work is keeping me busy through the end of the month, but I should have some time in December to dig into this and hopefully get a fix worked out.

maplibre / maplibre-gl-js