Loop Grid Item incompatible with background image on Flexbox (atomic)

[drdiercks]

Description

I started building my blog in Elementor V4 today, and noticed that

1. The atomic elements don't show up when trying to build a loop grid item template.
2. When you search for atomic elements, some still show up, like the flexbox (atomic)
3. But publishing returns an error.

The error:

Upon removing the atomic elements, and replacing it with the V3 container widget, publishing becomes possible again.

After some more testing, I found out that it's not the atomic elements themselves, but the background image that is causing the error.

Steps to reproduce:

1. Create loop item template
2. Add flexbox
3. Add background overlay with image to flexbox (from media library)

Error does not occur when:

• removing the background image
• adding gradient background overlay to the flexbox
• adding color background overlay

Agreement

• I confirm I have read and followed the Editor V4 Discussion Form guidelines, and agree this discussion may be closed without warning.

[function-az]

I am having a similar issue. I am able to publish, however the styles are not being pulled through from the atomic elements once published. It appears as it should in the editor except the background image. But the layout gets completely broken in the frontend (regenerated CSS, no nested links)

[outrank-charles]

I've just discovered the styling of Components, built with atomic elements are completely broken on the front-end when you use them in a Loop Grid, or Loop Carousel. This makes this entire design system unusable on real projects at the moment, and have to revert back to V3, which is disappointing.

In the editor, it looks like it should:

But on the frontend it's completely broken:

[function-az]

At first I thought it could be nested links but there is no other link aside from the postURL on the overarching container. It could be that doing this is applying an "additional" link to the nested elements but I'm not entirely sure.

[drdiercks]

I've noticed how when using local classes, these things tend to happen. Try to convert the local class into a global class. This might force the styling to maintain itself onto the rendered page. https://www.reddit.com/r/elementor/comments/1rcog3y/comment/o72a8cy/

[drdiercks]

It's been 1 month since this issue was posted, and no response from Elementor so far. That's quite concerning, given how essential the Loop Grid is to building any website.

[outrank-charles]

This comment might help you: https://github.com/orgs/elementor/discussions/34910#discussioncomment-16084019

[drdiercks]

Cheers! That helps out a lot.