Transform css makes the map crash the whole page

[jokeeras]

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

Expected Behavior

The map renders and works normally.

Actual Behavior

The map crashes the page or throws an error.

[SnailBones]

I'm not able to reproduce crashing in your sandbox, though the map cannot be interacted with. I'm seeing the same behavior in this simplified example.

@jokeeras Can you explain why you'd like to support rotating a map by 90 degrees? I think there may be a better solution than rotating the element, would resizing the map and creating it with rotation: 90 address your need?

This seems similar to https://github.com/mapbox/mapbox-gl-js/issues/11492 cc @avpeery

[RELNO]

I've reported a similar issue in react-map-gl, but it was notes there that this issue stems from the way mapbox-gl-js currently handles transformations . Here's the original issue:

Description

My app requires a map within a div that is transformed using matrix3d CSS transformer.

This was done before version 7 by transforming (matrix3d) a wrapping div around the map so that:

<div
      style={{
        transform:
          "matrix3d(0.7770456253, 0.0728373591, 0, 0.0000944713, -0.1763942931, 0.5033773233, 0, -0.0003884256, 0, 0, 1, 0, 136, 152, 0, 1)",
        height: "100vh"
      }}
    >
      <Map
        {...viewport}
        mapboxApiAccessToken={MAPBOX_TOKEN}
      />
    </div>

However, since version 7 the map object will freeze+crash the app, and the map itself will fail to load. Please see this in action in the attached CSB below.

Expected Behavior

Map can be transform3d as before.

Steps to Reproduce

Please reproduce issue below by changing from version 6 to 7

https://codesandbox.io/s/mapbox-issues-with-matrix-transform-nctjvk?file=/src/index.js

Environment

• Framework version:
• Map library: DeckGL ^8, react-map-gl ^7
• Browser:chrome/FF
• OS: macOS

Logs

There are different logs, most of them from other comps that fail to render due the lag. Some logs show mapbox fails to load tiles, but this is not consistent.

[jokeeras]

@SnailBones I opened your example and the page crashes as well, I'll put some SS(I'm using macOS maybe on windows it doesn't crash). We need the map to support(not crash) transform: rotate(-90deg) because we create a slide, with different types of cards(one of them is mapbox), that is used for exporting the whole slide as a PDF. The orientation of the slide can pe vertical/horizontal. For the horizontal position we use transform: rotate(-90deg) translateX(X) translateY(Y); to rotate everything.

.

[jokeeras]

Hello, It seems that the bug crashing the whole page is fixed but now there are 2 new bugs.

1. When you hover over the map you get an: Error Invalid LngLat object: (NaN, NaN). It's probably from the rotation of the map, the coordinates are not read correctly. This bug was introduces in version 2.2.0. If you change the version to 2.1.0 it doesn't happen and dragging the map works.

2. The map is cropped, because the width&height are reversed inside the canvas element. As you can see the map has a width: 700px and height: 300px but inside the canvas element you can see they are reversed. This bug was introduces in version 2.5.0. If you change the version to 2.4.0 it doesn't happen and the maps renders correctly.