ACP2E-111: Inconsistent product rating on category page

Author: amitjoc

app/code/Magento/Review/view/frontend/templates/helper/summary.phtml

@@ -19,7 +19,10 @@ $urlForm = $block->getReviewsUrl() . '#review-form';
         <?php if ($rating):?>
         <div class="rating-summary">
              <span class="label"><span><?= $block->escapeHtml(__('Rating')) ?>:</span></span>
-             <div class="rating-result" title="<?= $block->escapeHtmlAttr($rating); ?>%">
+             <div class="rating-result"
+                  id="rating-result_<?= /* @noEscape */ $block->getProduct()->getId() ?>"
+                  title="<?= $block->escapeHtmlAttr($rating) ?>%"
+             >
                  <span>
                      <span>
                          <span itemprop="ratingValue"><?= $block->escapeHtml($rating); ?>
@@ -28,9 +31,10 @@ $urlForm = $block->getReviewsUrl() . '#review-form';
                  </span>
              </div>
          </div>
-            <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-                "width:" . $block->escapeHtmlAttr($rating) . "%",
-                'div.rating-summary div.rating-result>span:first-child'
+            <?= /* @noEscape */
+            $secureRenderer->renderStyleAsTag(
+                'width:' . $block->escapeHtmlAttr($rating) . '%',
+                '#rating-result_' . $block->getProduct()->getId() . ' span'
             ) ?>
         <?php endif;?>
         <div class="reviews-actions">