Map.flyTo padding not being cleared -> fitBounds is summing it up with it's own padding argument.

[kamil-sienkiewicz-asi]

maplibre-gl-js version: 5.13.0

browser: chrome 141.0.7390.77

I think there were few issues about this already, but I don't see any open one, yet still this bug exists so creating new one.

Related issues:
mapbox/mapbox-gl-js#11831
#4095 - this was closed, but not resolved
#2984 -> there is no solution to my knowledge, mapbox says that they fixed it somehow

Steps to Trigger Behavior

Steps to Trigger Behavior

1. Call function map.FlyTo with padding ->

 map.flyTo({
   center: coordinates[0],
   padding: {
      top: 50,
      bottom: 0,
      left: 100,
      right: 0
   }
})

2. Call function map.fitBounds ->

map.fitBounds(bounds, {
 padding: 200
});

3. Call to fitBounds uses sum of padding from fitBounds and previous flyTo ->

padding = {
   top: 50 + 200,
   bottom: 200,
   left: 100 + 200,
   right 0 + 200,
}

Link to Demonstration

https://jsbin.com/xeseliyufe/edit?html,output

Screen.Recording.2025-11-20.at.13.19.55.webm

Expected Behavior

Padding is not summed up

Actual Behavior

Padding is summed up which breaks UI of the app

[HarelM]

When I test this page with a higher area (map with higher screen area) I don't see any issues.
I do see the issue in the video you provided, but I have a hard time reproducing the problem.
Can you do some more testing with different map aspect ratio and let me know if this might be related to a specific aspect ratio?
The provided code in the code pen set padding explicitly on each call, so it should avoid the original problem reported in the linked mapbox issue, I think.

[kamil-sienkiewicz-asi]

@HarelM I assume you don't see issue with it in different aspect ratios because padding is added to top, if you would add padding to the left, you would see issue with left padding in different aspect ratios.

Use left: 100 instead of 0 and you will see a gap, even tho fitBounds is called with padding: 0

Not sure what you mean by "so it should avoid the original problem reported in the linked mapbox issue, I think." IMO it's the exact same problem

[HarelM]

What I see when I set padding left to 100 on fly to, when clicking zoom-to first (using fitBounds) it doesn't add any padding at all (as expected).
Then when I click fly to and moves to the relevant point.
Then when I click zoom to, it uses the padding from flyTo and ignores the padding that was sent as part of fitBounds.
I would say that the title is not accurate as it doesn't keep on adding, but stays at 100, but that's a bit besides the point, there is a bug here never-the-less.
Let me know if you would like to try and tackle it.
I believe most of the code is in camera.ts class, maybe some is in map.ts file.

[kamil-sienkiewicz-asi]

Then when I click zoom to, it uses the padding from flyTo and ignores the padding that was sent as part of fitBounds. -> that's not true, if you would add

        map.fitBounds(bounds, {
          padding: 200
        });

then first call to fitBounds would work perfectly
But then if you would call flyTo with some padding, like { left: 100, top :50 } and then call fitBounds (with { padding: 200 }) again, it would result in SUM of those paddings, meaning that { padding: 200 } would be summed up with { left: 100, top :50 } from flyTo call, resulting in left = 300 and top = 250.

[HarelM]

Fair enough, I can argue that the initial reproduction that was shared does not show this problem which probably caused all this miscommunication.
Can you update the initial post with more accurate reproduction please?
No argue there's a bug here...

[dubbha]

Same here