freeze & crash following Map transformation [as of v7]

[RELNO]

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.

[Pessimistress]

There are major API changes in v7. You cannot use the same code from v6. Please follow the documentation.

[RELNO]

@Pessimistress thank you for your reply. I'm afraid I'm failing to see how the new syntax has to do with this issue. Even if one runs the very basic-hello world example from here https://github.com/visgl/react-map-gl#example, and wrap the map element with a transformed div element, the app will crash:

import "mapbox-gl/dist/mapbox-gl.css";
import React from "react";
import { render } from "react-dom";
import {Map} from 'react-map-gl';

export default function App() {
  const MAPBOX_TOKEN =
    "__TOKEN___";

  return (
        <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
      initialViewState={{
        longitude: -100,
        latitude: 40,
        zoom: 3.5
      }}
      style={{ width: 600, height: 400 }}
      mapStyle="mapbox://styles/mapbox/streets-v9"
      mapboxAccessToken={MAPBOX_TOKEN}
    />
    </div>
  );
}

render(<App />, document.getElementById("root"));

[Pessimistress]

Your 3d transform will crash mapbox-gl also, due to how the map handles transforms: https://github.com/mapbox/mapbox-gl-js/blob/79af3b651218d93ec84bee774f7cb02a8aebabd1/src/ui/map.js#L2859-L2867

I suggest you report a bug to the mapbox-gl repo.

[RELNO]

@Pessimistress great, thanks for the find - I'll link this issue there and will follow up.