Problem with handling two identical DOM elements with Lazyload Background CSS Images

[piotrbak]

Before submitting an issue please check that you’ve completed the following steps:

• Made sure you’re on the latest version
• Used the search feature to ensure that the bug hasn’t been reported before

Describe the bug
When we're dealing with two identical DOM elements with backgrounds, our script is not handling this properly.

To Reproduce
Steps to reproduce the behavior:

1. Use the latest WP Rocket version
2. Use the following markup https://pastebin.com/VnYkwUgv
3. Enable the Lazyload Background CSS Images feature
4. Visit the page in incognito mode
5. Images are not loaded with variable not defined message

Additional Context
This is not regression when comparing to #6150

Acceptance Criteria (for WP Media team use only)

1. We should handle two or more identical DOM elements having background images
2. We should not introduce regression compared to the previous state. The templates that could be used for e2e tests are available here and here.

[CrochetFeve0251]

Reproduce the issue

I was able to reproduce the issue when having two different selectors on the same DOM node.

Root cause

The bug occurs due to the first selector setting the data-rocket-lazy-bg to loaded preventing the second selector from loading its CSS variable.

Scope a solution

To fix that we will have to make the attribute unique to the pair in question and for this we gonna use its hash to give it this form:
data-rocket-lazy-bg-{hash}

For that we will have to modify two parts:

• The JSON formatter to make it load the hash.
• The script to make it add the hash to the attribute.

To add the field to the formatter nothing more easy just add a new field hash with the value $data['hash'] inside format.

To change the js to use the hash we need to add the hash value from the pair to the attribute on theses lines:

• https://github.com/wp-media/wp-rocket/blob/9cb64a3aa3f7d5d22f855e228d07d11cfbe1082b/src/js/global/lazyload-css.js#L18C9-L18C9

• wp-rocket/src/js/global/lazyload-css.js

  Line 43 in 9cb64a3

  if(el.getAttribute('data-rocket-lazy-bg') === 'loaded') {

Estimate effort

Effort S

[Tabrisrp]

looks good to me

[MathieuLamiot]

@CrochetFeve0251 Can this task be handled by someone else in the PHP team or is it much more efficient if you do it?

[CrochetFeve0251]

@CrochetFeve0251 Can this task be handled by someone else in the PHP team or is it much more efficient if you do it?

I think anyone could handle it.