Lazy-loading CSS background images is not working, the wrong selector is being targeted.

[johan-las]

Describe the bug We have a block with 2 differents selector seperated by a comma:

.elementor-79721 .elementor-element.elementor-element-2668f72.elementor-pp-element-2668f72-294689:not(.elementor-motion-effects-element-type-background), .elementor-79721 .elementor-element.elementor-element-2668f72.elementor-pp-element-2668f72-294689 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background-image: url(...);
}

Visiting the page with nowprocket parameter, the selector is the first one (before the comma) But the script is catching the second selector (after the comma)

As a result, we are defining the background variable with the wrong selector, which is why it isn’t working.

To Reproduce Steps to reproduce the behavior:

1. Create a template with the customer page
2. Activate the CSS background images option
3. Scroll down to the bottom of the article
4. See the related post as no image displayed

Expected behavior The background image should be shown.

Screenshots

• https://prnt.sc/rJbKSayDL4Lx

Desktop (please complete the following information):

• OS: Mac
• Browser Chrome
• Version 133.0.6943.127

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Slack discussion: https://group-onecom.slack.com/archives/C08EFUGUH5G/p1740489333610999 Ticket: https://secure.helpscout.net/conversation/2858190184/542257?viewId=8127831

The issue is tracked in /inc/Engine/Media/Lazyload/CSS/Subscriber.php, specifically in the generate_content() function.

Printing the variable $url_tags show that the selector is not the correct one:

Array
(
    [0] => Array
        (
            [selector] => .elementor-79721 .elementor-element.elementor-element-2668f72>.elementor-motion-effects-container>.elementor-motion-effects-layer
            [url] => https://dezaak.isdebesteklant.nl/wp-content/uploads/2024/04/Hoe-slim-is-geld-lenen-van-je-bv.jpg
            [original] => url("https://dezaak.isdebesteklant.nl/wp-content/uploads/2024/04/Hoe-slim-is-geld-lenen-van-je-bv.jpg")
            [block] => .elementor-79721 .elementor-element.elementor-element-2668f72>.elementor-motion-effects-container>.elementor-motion-effects-layer {
													background-image: url("https://dezaak.isdebesteklant.nl/wp-content/uploads/2024/04/Hoe-slim-is-geld-lenen-van-je-bv.jpg");
												}
            [hash] => b06b5c1d-f31a-4952-889e-edb7c98757eb
        )

)

[suzoutlet]

Another case: https://secure.helpscout.net/conversation/3095024193/589947