title: MaxBounds and custom asymmetric padding in Mapbox GL
body: <p>I have a Mapbox GL JS app, where over a map I display some widgets. To make sure nothing on the map will be hidden by them I've added some padding using <code>map.setPadding()</code>. It's an asymmetric one (left is larger than right in my case). It works as intended for things like <code>fitBounds</code> and animation but I also need to set up <code>maxBounds</code> of the map so the user won't pan out of the desired viewport. Unfortunately that doesn't work well with custom padding. When I draw the bounds and use <code>showPadding</code> I can see that those lines won't align. The problem grows bigger the bigger I make the difference between the paddings.</p>
  <p>I was wondering if anybody had similar issues or can lead me to a solution where I can have map clamped to some bounds while still being able to use custom padding like I described above.</p>
  <p>Here's an example of the issue: <a href="https://jsfiddle.net/1ysrgkcL/45/" rel="nofollow noreferrer">https://jsfiddle.net/1ysrgkcL/45/</a> Notice how the thick black rectangle doesn't align with the padding lines.</p>