Flex-direction: column causes extreme slowdown in Chrome and Safari
Yeah, it's definitely slower, not sure what is really happening but at the first guess, it might be this function which checks if the component is a block (eg. div) or an inline element (eg. span) https://github.com/artf/grapesjs/blob/1214bbd957e88df78cd99491e53ab243010cd1ed/src/utils/Sorter.js#L549 Any help is welcome
Read full answer below ↓Question
Hello,
We are having a major issue - our layouts use copious amounts of display: flex; flex-direction: column;, and this is causing extreme amounts of lag in Chrome and Safari browsers (not Firefox).
If the flex-direction style is set to row, there is no slowdown at all.
Sample: https://jsfiddle.net/gkeft254/ click on an inner element, duplicate and drag it around.
Video: grapesjs slowdown.zip
Answers (2)
Yeah, it's definitely slower, not sure what is really happening but at the first guess, it might be this function which checks if the component is a block (eg. div) or an inline element (eg. span) https://github.com/artf/grapesjs/blob/1214bbd957e88df78cd99491e53ab243010cd1ed/src/utils/Sorter.js#L549 Any help is welcome
Not able to reproduce anymore
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2592
Modal width
Hello, is there a way to set a modal's width, its currently set to 850px by CSS, but I would like to create a dialog with a small amount of...
Issue #1506
Css Media Query Issue
Hello @artf There is an issue on demo page as well as library in media query. Issue is that if user update style on mobile view first and t...
Issue #2403
editor.load possibly causes memory leak
How to reproduce:Naviagate to https://grapesjs.com/demo.htmlOpen browser console (Chrome) and type the following: setInterval(() => editor....
Issue #1368
Resize canvas
Is there a way to have a dynamic resizing of the canvas? i.e not using the Device Manager, but having a drag and drop of the width, similar...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.