raster-fade-duration is ignored after v4.2.0 #5038
Description
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-durationto 5000 (or a high number so the fade should be very clear). - Load the map. With
4.2.0it slowly fades in, and with4.3.0and 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 #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>