Closes #6269: Lazyload CSS background image compatibility issue with …

…Chrome 119+
wp-media · Dec 1, 2023 · 1fb6c44 · 1fb6c44
1 parent f588be9
commit 1fb6c44
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 6 deletions.
diff --git a/assets/js/lazyload-css.js b/assets/js/lazyload-css.js
@@ -13,7 +13,13 @@ function rocket_css_lazyload_launch() {
 				const pairs = usable_pairs.filter(s => entry.target.matches(s.selector));
 				pairs.map(pair => {
 					if (pair) {
-						styleElement.innerHTML += pair.style;
+						const img = new Image();
+						img.src = pair.url;
+
+						img.onload = () => {
+							styleElement.innerHTML += `<style>${pair.style}</style>`;
+						}
+
 						pair.elements.forEach(el => {
 							// Stop observing the target element
 							observer.unobserve(el);

diff --git a/assets/js/lazyload-css.min.js b/assets/js/lazyload-css.min.js
diff --git a/assets/js/lazyload-css.min.js.map b/assets/js/lazyload-css.min.js.map
diff --git a/inc/Engine/Media/Lazyload/CSS/Front/MappingFormatter.php b/inc/Engine/Media/Lazyload/CSS/Front/MappingFormatter.php
@@ -21,11 +21,12 @@ public function format( array $data ): array {
 			$url      = $datum['url'];
 
 			$placeholder          = "--wpr-bg-$hash";
-			$variable_placeholder = ':root{' . $placeholder . ': ' . $url . ';}';
+			$variable_placeholder = $datum['selector'] . '{' . $placeholder . ': ' . $url . ';}';
 			$formatted_urls[]     = [
 				'selector' => $selector,
 				'style'    => $variable_placeholder,
 				'hash'     => $hash,
+				'url'	   => $url,
 			];
 		}
 

diff --git a/inc/Engine/Media/Lazyload/CSS/Front/TagGenerator.php b/inc/Engine/Media/Lazyload/CSS/Front/TagGenerator.php
@@ -28,7 +28,7 @@ function ( $mapping_item ) use ( $loaded ) {
 		foreach ( $loaded as $item ) {
 			$loaded_content .= $item['style'];
 		}
-		$loaded_tag = "<style id=\"wpr-lazyload-bg\"></style><style id=\"wpr-lazyload-bg-exclusion\">$loaded_content</style>";
+		$loaded_tag = "<div id=\"wpr-lazyload-bg\"></div><style id=\"wpr-lazyload-bg-exclusion\">$loaded_content</style>";
 
 		$nostyle_content = '';
 		foreach ( $mapping as $item ) {

diff --git a/src/js/global/lazyload-css.js b/src/js/global/lazyload-css.js
@@ -23,7 +23,13 @@ function rocket_css_lazyload_launch() {
 				const pairs = usable_pairs.filter(s => entry.target.matches(s.selector));
 				pairs.map(pair => {
 					if (pair) {
-						styleElement.innerHTML += pair.style;
+						const img = new Image();
+						img.src = pair.url;
+
+						img.onload = () => {
+							styleElement.innerHTML += `<style>${pair.style}</style>`;
+						}
+
 						pair.elements.forEach(el => {
 							// Stop observing the target element
 							observer.unobserve(el);