[Entity-Browser] Icons distorted on Chrome
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3349561. --> Reported by: [rwam](https://www.drupal.org/user/1373704) Related to !239 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>On current chrome icons on an Entity Browser Widget are distorted.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <p>After selection of an image using Entity Browser you will get distorted icons on current Chrome only:</p> <p><img src="https://www.drupal.org/files/issues/2023-03-22/gin-icons-current.png" alt="Current Behavior"></p> <p>On current firefox or safari on mac I do not have any issues.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Avoid one-value syntax for <code>background-size</code>. It sets the width of the image but the height becomes <em>auto</em>. See <a href="https://www.drupal.orgMDN%20docs">https://developer.mozilla.org/en-US/docs/Web/CSS/background-size</a>. Using <code>background-size: 15px 15px;</code> will fix the issue for me:</p> <p><img src="https://www.drupal.org/files/issues/2023-03-22/gin-icons-expected.png" alt="Expected Behavior"></p>
issue