[Bug] Background image layers
Question
Bug: when your pre-defined block or saved templates have two or more background layers, if you add a new layer, a lot of new empty layers are created.
How to reproduce it:
- Go to https://grapesjs.com/demo.html
- Select the pink Header block
- Go to Decorations -> background and add a new layer
- Deselect the pink Header and select it again
- Go to Decorations -> background, you will see new empty layers
- If you repeat the previous cycle, you will get hundreds of empty layers.
30 seconds video showing the problem: https://screencast-o-matic.com/watch/cFQVb0q4Ex
It happens in Chrome, Safari and Firefox, last versions.
@artf can you give me any clue of where the new background layers addition is controlled in grapesjs? I would like to try to fix it myself. Thank you!
Answers (2)
Thanks @xamdam777 for the report. Actually, as you already indicated, this happens when you import the style (and browser's CSS parsers are pretty messy), and unfortunately, in few cases, conflicts happen. (eg. Chrome generates a style that even itself doesn't understand)

the strange think happens here when you add a new layer
as you see background-repeat and background-position contain more than 3 expected values (they have 5 for some reason).
BTW if you would like to fix it you can probably start from the function which adds a new layer https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69
Thank you very much @artf, now I completely understand the problem, damned browser's parsers! :)
I have been doing some tests in addLayer() and refreshLayers().
This is my current approach, modifying refreshLayers() function, I try to detect the wrong layers and do not show them.
I placed the code below in line 131 of https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69 (near the end of refreshLayers function)
It seems to be working fine with a lot of bugged samples (it never shows bugged layers), but since it does not really removes the wrong code (the wrong CSS is still there), I wonder if this is a bad solution.
var arrayWrongLayers = new Array;
var myLayersArray = layersObj;
var arrayLength = myLayersArray.length;
for (var i = 0; i < arrayLength; i++) {
//console.log(myLayersArray[i]);
var imagevalue= myLayersArray[i].properties[0].value;
if(( imagevalue.toLowerCase().indexOf('.png') >= 0)||( imagevalue.toLowerCase().indexOf('.jpg') >= 0)||( imagevalue.toLowerCase().indexOf('.gif') >= 0)||( imagevalue.toLowerCase().indexOf('.jpeg') >= 0)||( imagevalue.toLowerCase().indexOf('.svg') >= 0)){
console.log("It's image");
} else {
console.log("It's NOT image");
arrayWrongLayers.push(i);
}
}
console.log("the wrong layers are" + arrayWrongLayers);
var arrayWrongLayersLength = arrayWrongLayers.length;
for (var i = 0; i < arrayWrongLayersLength; i++) {
console.log(arrayWrongLayers[i]);
//Deletes the last layer on the stack before rendering them in the style manager
//Better to delete the layer by index, but I found problems doing that and pop() works too
layersObj.pop();
}
Maybe we could really delete the layer from the model using this approach?
Thanks again!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3866
BUG: SVG Not rendering when inside any HTML Element
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 94.0.4606.81 (Official Build) (64-bi...
Issue #1563
[Bug] Trait - Change Video Provider issue
Version: 0.14.40 Bug: When you change "Provider" field -> all settings gone. It happens in Chrome, Safari and Firefox, last versions. How t...
Issue #4188
BUG: SVG <linearGradient> tag become <lineargradient> in canvas
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Microsoft Edge Version 99.0.1150.30 Reprod...
Issue #2508
[Bug] Draggable property added in the final HTML text components
This bug is also on the online demo : https://grapesjs.com/demo.htmlAdd a Text Block to the page, start typing and hiting enter to make sev...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.