Can't reconstruct a map from it's previous bounds, pitch, and bearing

[DannyDelott]

mapbox-gl-js version:
0.45.0

Background
My application has two pages, an Interactive Map and a Reports page. When users switch between pages, the map should look the same as how they left it.

To do this, I track the pitch, bearing, and bounds as the user interacts with the map.

Unfortunately, I am having trouble reconstructing their map, particularly when pitch or bearing are non-zero.

Steps to Trigger Behavior

1. Instantiate a map, call fitBounds and easeTo to set the viewport.
2. Instantiate another map, call fitBounds and easeTo with the first map's values.

Link to Demonstration

http://jsbin.com/vipofiyaco/1/edit?html,output

Expected Behavior

Both maps should look identical.

Actual Behavior

The new map looks drastically different.

[jfirebaugh]

For a pitched map, the result of getBounds() is only approximate, because it's not possible to represent the bounds of a pitched map with a rectangular box. (#2112).

If you want to sync the state of two maps, use:

map2.easeTo({
    center: map1.getCenter(),
    zoom: map1.getZoom(),
    bearing: map1.getBearing(),
    pitch: map1.getPitch()
});

Or: https://github.com/mapbox/mapbox-gl-sync-move