EDIT: This issue is specific to this setup. Please use the code from here if you wish to help. Thanks!
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.
The console starts perpetually filling up with warnings:
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 > 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 > eval:32:191695
Error: WebGL warning: drawingBufferWidth: Requested size 21535x8218 was too large, but resize to 10767x4109 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 20020x7637 was too large, but resize to 10010x3818 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 20020x7637 was too large, but resize to 10010x3818 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 18609x7099 was too large, but resize to 9304x3549 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 18609x7099 was too large, but resize to 9304x3549 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 17297x6598 was too large, but resize to 8648x3299 succeeded. bundle.min.js line 15214 > 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 > eval:201:9
Error: WebGL warning: clear: Requested size 21925x8361 was too large, but resize to 10962x4180 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 21925x8361 was too large, but resize to 10962x4180 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 20379x7772 was too large, but resize to 10189x3886 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 20379x7772 was too large, but resize to 10189x3886 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 18943x7225 was too large, but resize to 9471x3612 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 18943x7225 was too large, but resize to 9471x3612 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 17607x6715 was too large, but resize to 8803x3357 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 17607x6715 was too large, but resize to 8803x3357 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 22314x8510 was too large, but resize to 11157x4255 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 22314x8510 was too large, but resize to 11157x4255 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 20743x7911 was too large, but resize to 10371x3955 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 20743x7911 was too large, but resize to 10371x3955 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 19280x7354 was too large, but resize to 9640x3677 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 19280x7354 was too large, but resize to 9640x3677 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 17925x6834 was too large, but resize to 8962x3417 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 17925x6834 was too large, but resize to 8962x3417 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 16662x6351 was too large, but resize to 8331x3175 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 16662x6351 was too large, but resize to 8331x3175 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 21115x8049 was too large, but resize to 10557x4024 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 21115x8049 was too large, but resize to 10557x4024 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 19626x7482 was too large, but resize to 9813x3741 succeeded. bundle.min.js line 15214 > eval:32:60490
Error: WebGL warning: drawingBufferWidth: Requested size 19626x7482 was too large, but resize to 9813x3741 succeeded. bundle.min.js line 7141 > eval:201:9
Error: WebGL warning: clear: Requested size 18246x6954 was too large, but resize to 9123x3477 succeeded. bundle.min.js line 15214 > eval:32:60490
I took a look at performance with the React profiler: React Profiler output
In every commit that takes longer to process than normal, it shows AutoSizer taking a long time to render.
Reproducing the problem:
Node version: v10.16.3
- Run create-react-app my-app.
- Copy code below.
- Apply display: none on any element containing the map, including the elements rendered by Deck.gl.
WARNING: Reproducing this issue takes up a lot of resources and might crash your computer!
The code
index.tsx
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(<GeoMapChart />, document.getElementById('root'));
serviceWorker.unregister();
GeoMapChart.tsx
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 (
<DeckGL viewState={viewState} controller={true} width={'100%'} height={'100%'} layers={[]} onViewStateChange={
({viewState, oldViewState, interactionState}) => {
const newViewState = {...viewState};
setViewState(newViewState);
}}>
<StaticMap width={'100%'} height={'100%'} mapStyle={MAPBOX_BASE_LAYER}/>
</DeckGL>
)
}
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 <a href="http://stamen.com">Stamen Design</a>, under
<a href="http://creativecommons.org/licenses/by/3.0"> CC BY 3.0</a>. Data by
<a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">
ODbL</a>.`.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,
}
],
};
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Deck.gl performance issue</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
package.json
{
"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": [
">0.2%",
"not dead",
"not ie <= 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"
]
}
}
webpack.config.js
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'
}),
]
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
"module": "commonjs",
"target": "es6",
"jsx": "react",
// "suppressImplicitAnyIndexErrors": true,
},
"include": [
"./src/**/*"
]
}
display: noneonly via DevTools or you do it programmatically? – Gorgonian