Description
Subject of the issue
I need all the blocks to be placed close to each other (maximum distance should not exceed 2px) and "sizeToContent" should be used. For this I used cellHeight: '1px' || '2px' and everything worked fine for both small and large blocks. With other cellHeight values, the distance between the blocks vertically will be large.
Up to version 11.1.2 (inclusive) I had no problems with initialization:
Starting with version 11_2_0 and up to 11.4.0, terrible slowdowns begin during initialization. If I specify cellHeight: '50px' or I do not specify cellHeight, then ev 5C24 erything will work quickly, but there will be a gap between the blocks vertically.
Your environment
- version of gridstack.js - 11.1.2 & 11.2.0 & 11.4.0
- which Chrome, Chromium/Windows 8.1, 10
Steps to reproduce
This behavior cannot be simulated on jsfiddle.net, because it requires a large browser window.
On the HTML page, create more than 15 image blocks of size 3840x2160
Expand the browser window to full screen.
and after the page loads, initialize:
window.onload = function() {
const opts = {
margin: '0px',
cellHeight: '1px',
sizeToContent: true,
column: 48,
};
var objGridStack = GridStack.init({...opts});
};
Attached is an archive that you can deploy on your server and check the execution speed. In the index.html file, you can connect either 11.1.2 or 11.4.0
gs.zip
Expected behavior
The speed of initialization in 11.2.0 and subsequent versions should not be several (3-10) times lower than in 11.1.2
"addCSSRule" in GS works very slowly