StoreFront Header Branding Logo Display shows distorted when zoom is applied to browser (chrome, IE, Edge, Firefox)

Description

When a custom logo is applied to a StoreWeb in Storefront 3.x and zoom feature on browser is used, the logo will be cut off and will not be displayed properly. This behavior can be seen in multiple browser versions

Resolution

When this problem is observed, follow the steps below

note: before making any changes please make a copy of the original style.css file, save it to another location. Then, you can proceed with modifying file

1: locate style.css under "custom" folder of the RfWeb site;
example: C:\inetpub\wwwroot\Citrix\storeWeb\custom\style.css

2: comment out the lines the way as follows,
.is-hdpi .logo-container{
            background-image: url('CustLogo1.png');
          /*background-size: XXXpx XXXpx;*/ <<<< commented line
}
  .is-hdpi .logon-logo-container{
          background-image: url('CustLogoImage.png');
          /*background-size: XXXpx XXXpx;*/ <<<< commented line
}
3: save the file

4. recommended: perform IISReset

5. Clear browser cache, close browser, relaunch browser. Please perform these steps on all browser prior testing.

Problem Cause

changes to the style.css are required in some instances to clear this problem.
In some instances, no changes are required. However, if problem is observed in environment is recommended to follow steps provided in solution

Issue/Introduction

When a custom logo is applied to a StoreWeb in Storefront 3.x and zoom feature on browser is used, the logo will be cut off and will not be displayed properly. This behavior can be seen in multiple browser versions

Welcome to "KB Articles"