Merge remote-tracking branch 'upstream/2.4.0-develop' into 3.0.0-RC4-2.4.0

Author: jilu1

app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml

@@ -18,8 +18,10 @@ $enableLazyLoadingWithoutBorders = (bool)$block->getVar(
     'enable_lazy_loading_for_images_without_borders',
     'Magento_Catalog'
 );
+$width = (int)$block->getWidth();
+$paddingBottom = $block->getRatio() * 100;
 ?>
-<span class="product-image-container" id="product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
+<span class="product-image-container product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
     <span class="product-image-wrapper">
         <img class="<?= $escaper->escapeHtmlAttr($block->getClass()) ?>"
             <?php foreach ($block->getCustomAttributes() as $name => $value): ?>
@@ -36,11 +38,29 @@ $enableLazyLoadingWithoutBorders = (bool)$block->getVar(
             <?php endif; ?>
             alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
 </span>
-<?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-    'width:' . (int)$block->getWidth() . 'px;',
-    '#product-image-container-' . $block->getProductId()
-) ?>
-<?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-    'padding-bottom: '. ($block->getRatio() * 100) . '%;',
-    '#product-image-container-' . $block->getProductId() . ' span.product-image-wrapper'
-) ?>
+<?php
+$styles = <<<STYLE
+.product-image-container-{$block->getProductId()} {
+    width: {$width}px;
+}
+.product-image-container-{$block->getProductId()} span.product-image-wrapper {
+    padding-bottom: {$paddingBottom}%;
+}
+STYLE;
+//In case a script was using "style" attributes of these elements
+$script = <<<SCRIPT
+prodImageContainers = document.querySelectorAll(".product-image-container-{$block->getProductId()}");
+for (var i = 0; i < prodImageContainers.length; i++) {
+    prodImageContainers[i].style.width = "{$width}px";
+}
+prodImageContainersWrappers = document.querySelectorAll(
+    ".product-image-container-{$block->getProductId()}  span.product-image-wrapper"
+);
+for (var i = 0; i < prodImageContainersWrappers.length; i++) {
+    prodImageContainersWrappers[i].style.paddingBottom = "{$paddingBottom}%";
+}
+SCRIPT;
+
+?>
+<?= /* @noEscape */ $secureRenderer->renderTag('style', [], $styles, false) ?>
+<?= /* @noEscape */ $secureRenderer->renderTag('script', ['type' => 'text/javascript'], $script, false) ?>