fitBounds() is whacky until resize() is called

Nobody has claimed this yet.

**mapbox-gl-js version**: 2.3.1

[I submit this bug report for your benefit, not mine. It is not a complete repro. Obvious workaround is calling `map.resize()` immediately after load.]

### Steps to Trigger Behavior

https://user-images.githubusercontent.com/678344/133007695-e236934e-abfb-4bcf-a1a6-55af2748d501.mov

1. Call fitBounds() for a given bbox.
2. The map pans to the wrong area - half the bounds is off screen.
3. Call resize() and it's fine.

Note that the map is otherwise correctly sized within its container - all four corners are correctly located.

May be related to #8920, not sure.

The specific code here is:

```js
this.map.U.addGeoJSON('results-bbox', turf.bboxPolygon(bbox));
this.map.U.addLine('results-bbox-line', 'results-bbox', {
lineColor: 'magenta',
});
this.map.fitBounds(bbox, {
padding: { top: 100, bottom: 100, left: 50, right: 50 },
});
```

Start at the fitBounds() and resize() entry points and reproduce the listed sequence with the asymmetric padding. Compare the behavior with related issue #8920 and determine why fitBounds() uses incorrect bounds before resize(). Done means the bounds are positioned correctly without requiring an immediate resize() call.

Written by the indexing model from the issue text.