Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

raster-fade-duration is ignored after v4.2.0 #5038

Open
JacobJeppesen opened this issue Nov 12, 2024 · 2 comments
Open

raster-fade-duration is ignored after v4.2.0 #5038

JacobJeppesen opened this issue Nov 12, 2024 · 2 comments
Labels
bug Something isn't working PR is more than welcomed Extra attention is needed

Comments

@JacobJeppesen
Copy link

JacobJeppesen commented Nov 12, 2024 •
edited
Loading

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

  1. Create a simple map with OpenStreetMap layer.
  2. Set raster-fade-duration to 5000 (or a high number so the fade should be very clear).
  3. 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 #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/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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
Copy link
Collaborator

HarelM commented Nov 12, 2024

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?

@HarelM HarelM added bug Something isn't working PR is more than welcomed Extra attention is needed labels Nov 12, 2024
@wagewarbler
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working PR is more than welcomed Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@HarelM @JacobJeppesen @wagewarbler