title: Display: none on Deck.gl React component causes huge performance issue
body: <p><strong>EDIT:</strong> This issue is specific to this setup. Please use the code from here if you wish to help. Thanks!</p>
  
  <p>I am using Deck.gl with react to display a map. When I try to hide the map with display: none it starts to freeze up my whole computer. I have worked around this by using visibility: collapse instead, but I would like to know why display: none causes this problem.</p>
  
  <p>The console starts perpetually filling up with warnings:</p>
  
  <pre><code>luma: Device pixel ratio clamped context.js:202:84
  Error: WebGL warning: clear: Requested size 21535x8218 was too large, but resize to 10767x4109 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawElements: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once) bundle.min.js line 15214 &gt; eval:32:191695
  Error: WebGL warning: drawingBufferWidth: Requested size 21535x8218 was too large, but resize to 10767x4109 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 20020x7637 was too large, but resize to 10010x3818 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 20020x7637 was too large, but resize to 10010x3818 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 18609x7099 was too large, but resize to 9304x3549 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 18609x7099 was too large, but resize to 9304x3549 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 17297x6598 was too large, but resize to 8648x3299 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Source map error: Error: NetworkError when attempting to fetch resource.
  Resource URL: webpack:///./node_modules/@luma.gl/webgl/dist/esm/context/context.js?
  Source Map URL: context.js.map
  Error: WebGL warning: drawingBufferWidth: Requested size 17297x6598 was too large, but resize to 8648x3299 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 21925x8361 was too large, but resize to 10962x4180 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 21925x8361 was too large, but resize to 10962x4180 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 20379x7772 was too large, but resize to 10189x3886 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 20379x7772 was too large, but resize to 10189x3886 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 18943x7225 was too large, but resize to 9471x3612 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 18943x7225 was too large, but resize to 9471x3612 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 17607x6715 was too large, but resize to 8803x3357 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 17607x6715 was too large, but resize to 8803x3357 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 22314x8510 was too large, but resize to 11157x4255 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 22314x8510 was too large, but resize to 11157x4255 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 20743x7911 was too large, but resize to 10371x3955 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 20743x7911 was too large, but resize to 10371x3955 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 19280x7354 was too large, but resize to 9640x3677 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 19280x7354 was too large, but resize to 9640x3677 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 17925x6834 was too large, but resize to 8962x3417 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 17925x6834 was too large, but resize to 8962x3417 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 16662x6351 was too large, but resize to 8331x3175 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 16662x6351 was too large, but resize to 8331x3175 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 21115x8049 was too large, but resize to 10557x4024 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 21115x8049 was too large, but resize to 10557x4024 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 19626x7482 was too large, but resize to 9813x3741 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  Error: WebGL warning: drawingBufferWidth: Requested size 19626x7482 was too large, but resize to 9813x3741 succeeded. bundle.min.js line 7141 &gt; eval:201:9
  Error: WebGL warning: clear: Requested size 18246x6954 was too large, but resize to 9123x3477 succeeded. bundle.min.js line 15214 &gt; eval:32:60490
  </code></pre>
  
  <p>I took a look at performance with the React profiler: 
  <a href="https://i.stack.imgur.com/8Sqaa.png" rel="nofollow noreferrer">React Profiler output</a></p>
  
  <p>In every commit that takes longer to process than normal, it shows AutoSizer taking a long time to render.</p>
  
  <p><strong>Reproducing the problem</strong>:</p>
  
  <p>Node version: v10.16.3</p>
  
  <ol>
  <li>Run create-react-app my-app.</li>
  <li>Copy code below.</li>
  <li>Apply display: none on any element containing the map, including the elements rendered by Deck.gl.</li>
  </ol>
  
  <p><strong>WARNING</strong>: Reproducing this issue takes up a lot of resources and might crash your computer!</p>
  
  <p><strong>The code</strong></p>
  
  <p>index.tsx</p>
  
  <pre><code>import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import * as serviceWorker from './serviceWorker';
  import 'mapbox-gl/dist/mapbox-gl.css';
  import {GeoMapChart} from './GeoMapChart'
  
  ReactDOM.render(&lt;GeoMapChart /&gt;, document.getElementById('root'));
  
  serviceWorker.unregister();
  </code></pre>
  
  <p>GeoMapChart.tsx</p>
  
  <pre><code>import * as React from 'react';
  import DeckGL from '@deck.gl/react';
  import {StaticMap} from 'react-map-gl';
  
  
  export function GeoMapChart() {
  
      const [viewState, setViewState] = React.useState(INITIAL_VIEW_STATE);
  
      return (
              &lt;DeckGL viewState={viewState} controller={true} width={'100%'} height={'100%'} layers={[]}  onViewStateChange={
                  ({viewState, oldViewState, interactionState}) =&gt; {
                      const newViewState = {...viewState};
                      setViewState(newViewState);
                  }}&gt;
  
                  &lt;StaticMap width={'100%'} height={'100%'} mapStyle={MAPBOX_BASE_LAYER}/&gt;
              &lt;/DeckGL&gt;
      )
  }
  
  const MAX_ZOOM = 19;
  const MIN_ZOOM = 2;
  const INITIAL_VIEW_STATE = {
      latitude: 37.77,
      longitude: -122.42,
      zoom: 5,
      bearing: 0,
      pitch: 0,
      maxZoom: MAX_ZOOM,
      minZoom: MIN_ZOOM
  };
  
  
  const BASEMAP_TILE_SOURCE_NAME = 'simple-tiles';
  const BASEMAP_TILE_SERVERS = [
      'http://a.tile.osm.org/{z}/{x}/{y}.png',
      'http://b.tile.osm.org/{z}/{x}/{y}.png',
      'http://c.tile.osm.org/{z}/{x}/{y}.png',
      //'//stamen-tiles-a.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',
      //'//stamen-tiles-b.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',
      //'//stamen-tiles-c.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg',
  ];
  const BASEMAP_ATTRIBUTION = `Map tiles by &lt;a href="http://stamen.com"&gt;Stamen Design&lt;/a&gt;, under
  &lt;a href="http://creativecommons.org/licenses/by/3.0"&gt; CC BY 3.0&lt;/a&gt;. Data by
  &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;, under &lt;a href="http://www.openstreetmap.org/copyright"&gt;
  ODbL&lt;/a&gt;.`.replace(/\n/gm, '');
  const COMMON_LAYER_CONFIG = {
      minZoom: 2,
      maxZoom: 17, // New data will be requested until this level
      pixelScaleFactor: 8,
      tileSize: 256,
      isTms: true,
      topoLayerClusteringSwithLevel: 13,
      maxVisibleRasterLayers: 3,
      maxConfigurableLayers: 26,
  };
  const MAP_CONFIG = {
      MIN_ZOOM: 1,
      MAX_ZOOM: 18,
      INITIAL_ZOOM: 9,
      SHOW_TILE_BOUNDARIES: false,
      DRAG_ROTATE: false,
      ZOOM_NO_DATA: 2,
      SEARCH_DEFAULT_ZOOM: 14,
  };
  
  const MAPBOX_BASE_LAYER = {
      version: 8,
      sources: {
          [BASEMAP_TILE_SOURCE_NAME]: {
              type: 'raster',
              tiles: BASEMAP_TILE_SERVERS,
              tileSize: COMMON_LAYER_CONFIG.tileSize,
              attribution: BASEMAP_ATTRIBUTION,
          }
      },
      layers: [
          {
              id: BASEMAP_TILE_SOURCE_NAME,
              type: 'raster',
              source: BASEMAP_TILE_SOURCE_NAME,
              minzoom: MAP_CONFIG.MIN_ZOOM,
              maxzoom: MAP_CONFIG.MAX_ZOOM,
          }
      ],
  };
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns:th="http://www.thymeleaf.org"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
  
    &lt;title&gt;Deck.gl performance issue&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
      "name": "NOT_PUBLIC",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
          "@types/lodash": "^4.14.149",
          "@types/node": "13.1.8",
          "@types/react": "16.8.3",
          "@types/react-dom": "16.0.11",
          "@types/react-router-dom": "5.1.3",
          "axios": "0.19.0",
          "deck.gl": "7.3.7",
          "jss": "10.0.0-alpha.3",
          "lodash": "4.17.15",
          "react": "16.8.5",
          "react-dom": "16.8.5",
          "react-map-gl": "5.1.3",
          "react-router-dom": "5.1.2"
      },
      "scripts": {
          "start": "webpack-dev-server --mode development --hot",
          "build": "webpack --mode production",
          "test": "react-scripts test",
          "eject": "react-scripts eject"
      },
      "eslintConfig": {
          "extends": "react-app"
      },
      "browserslist": [
          "&gt;0.2%",
          "not dead",
          "not ie &lt;= 11",
          "not op_mini all"
      ],
      "devDependencies": {
          "@danmarshall/deckgl-typings": "^3.4.3",
          "@types/react-map-gl": "^5.0.3",
          "@types/uuid": "^3.4.6",
          "awesome-typescript-loader": "^5.2.1",
          "babel-jest": "^23.6.0",
          "css-loader": "^2.1.0",
          "enzyme": "^3.8.0",
          "enzyme-adapter-react-16": "^1.7.1",
          "enzyme-to-json": "^3.3.5",
          "html-loader": "^0.5.5",
          "html-webpack-plugin": "^3.2.0",
          "jest": "^23.6.0",
          "node-sass": "^4.11.0",
          "react-scripts": "2.1.2",
          "react-test-renderer": "^16.7.0",
          "sass-loader": "^7.1.0",
          "source-map-loader": "^0.2.4",
          "style-loader": "^0.23.1",
          "typescript": "3.7.4",
          "webpack": "^4.28.1",
          "webpack-cli": "^3.2.1",
          "webpack-dev-server": "^3.1.14"
      },
      "jest": {
          "snapshotSerializers": [
              "enzyme-to-json/serializer"
          ]
      }
  }
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>const path = require('path');
  
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: './src/index.tsx',
    devServer: {
      port: 9012,
      historyApiFallback: true,
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js']
    },
    output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.min.js'
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'awesome-typescript-loader'
        },
        {
          test:/\.css$/,
          use:['style-loader','css-loader', 'sass-loader']
        },
        {
          test: /\.scss$/, 
          use:["css-loader",'sass-loader']
        },
        {
          test: /\.(?:png|jpg|svg)$/,
          loader: 'url-loader'
  
      },
      {
        test: /\.(ico|jpeg|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
        loader: 'file-loader'
  
    },
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: '!!html-loader!./src/index.html'
      }),
  
    ]
  }
  </code></pre>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
      "compilerOptions": {
          "outDir": "./dist/",
          "sourceMap": true,
          "noImplicitAny": false,
          "module": "commonjs",
          "target": "es6",
          "jsx": "react",
          // "suppressImplicitAnyIndexErrors": true,
      },
      "include": [
          "./src/**/*"
      ]
  }
  </code></pre>