Transform css makes the map crash the whole page

Nobody has claimed this yet.

We render a map on a slide that can be landscape or portrait. For portrait mode we don't have specific css but for landscape mode we add `transform: rotate(-90deg) translateX(X) translateY(Y);` and mapbox crashes the page with this.

**mapbox-gl-js version**: 2.8.1

**browser**: Chrome

### Steps to Trigger Behavior
1. Open the CodeSandbox
2. Page crashes

### Link to Demonstration
If you comment `transform: rotate(-90deg) translateX(-120px) translateY(-120px);` from App.scss then refresh the page the map renders. Now uncomment the css and see that it renders the map but if you hover over it is gonna throw an error `Invalid LngLat object: (NaN, NaN)`. After that refresh the page again and is gonna crash.

So if we have the css when mapbox loads it crashes the page and if we add it after the map renders it throws an error.
[CodeSandbox](https://codesandbox.io/s/mapbox-crash-70vqzv?file=/src/App.scss)

### Expected Behavior
The map renders and works normally.

### Actual Behavior
The map crashes the page or throws an error.

Reproduce the failure in the linked CodeSandbox, starting with the transform rule in App.scss. Compare loading the map with the rule present versus adding it after render, then follow the hover path that reports `Invalid LngLat object: (NaN, NaN)`. Done means the map renders and remains usable in landscape mode without crashing or throwing on hover.

Written by the indexing model from the issue text.