Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 9, 2021 at 7:28 pm #1332196
    Hurricane4x

    Hello Support Team,
    I am current having an issue with a website I am developing that I has been consistent on only the Microsoft Edge browser. I have also seen that the issue is affected by one of the display settings in Windows. The setting is the “Scale and Layout” size. When viewing the website with this setting set at 125%, the website becomes fully broken on the Edge browser, as none of the content appears properly. Below are some links to screen shots.

    Scaling at 100% (Displaying correctly):
    https://trg1-my.sharepoint.com/:i:/g/personal/intern_trg-marketing_com/Eff02bMmZMpBv1AbUKFiWjoBJVoe_3tYF7obS_4PL1WoCg?e=6zgY1W

    Scaling at 125% (Displaying incorrectly):
    https://trg1-my.sharepoint.com/:i:/g/personal/intern_trg-marketing_com/EU2C64RwQy5MlqQSZLDKdZMBeXTXwIgvXAWz6ZpWu1S-lQ?e=mumbvE

    Thanks!

    December 10, 2021 at 1:43 pm #1332315
    Mike

    Hey Hurricane4x,
    Thank you for your screenshots, from them I believe that you are the Windows setting “Scale and Layout”, this is only a local setting and doesn’t accurately test your site.
    You should use the Edge DevTools by pressing [F12]
    I assume that you are trying to Emulate mobile devices in Microsoft Edge, the Windows setting “Scale and Layout” will not do this.

    Best regards,
    Mike

    December 12, 2021 at 1:29 am #1332454
    Hurricane4x

    Thanks for the response,

    While yes, I am testing the website on different devices, I did not change the scale and layout setting for the purpose of emulating the mobile view. From the research I have gathered, this Scale and Layout setting has a different default setting based on different devices. I have tested on 2 different windows computers that have the default Scale and Layout setting at 125%. Both of them show this same issue shown from the screenshots. The only reason I changed the Scale and Layout option was because that was the only thing that would make the site viewable. When scale and layout is set to any other option besides 125%, the website appears normally.

    So, to re-iterate, the issue is more about the concern that the website is not functioning properly on any windows device where this local setting is defaulted at 125% (In Microsoft Edge). Other browsers do not have this issue as I have tested this local setting with other browsers and the website scales correctly. I am aware and understand that Scale and Layout is a local setting that does accurately test the website, but it was the only setting I could change that would show the website correctly in the browser. I am not trying to say that this local setting is causing the issue, but simply saying that it is a variable as changing it does have a unique effect on the website.

    With all of that being said what are some other next steps that you suggest moving forward? I will continue to use the developer tools to investigate but I am still lost as to where to look for a solution.

    Thanks

    December 12, 2021 at 2:06 am #1332456
    Mike

    Hi,
    Thank you for the feedback, when I test 125% scaling on our 2017 Demo with my Windows 10 & Edge I don’t see any issues:
    2021-12-11_019.jpg
    Your site requires a login to see it, please include so I can recreate your error.

    Best regards,
    Mike

    December 12, 2021 at 2:19 am #1332458
    Hurricane4x
    This reply has been marked as private.
    December 12, 2021 at 6:38 pm #1332487
    Mike

    Hi,
    Thank you for the login, I tested your site and was able to reproduce the issue, I noticed that this also occurred in Chrome, but it didn’t occur on my 2017 Demo site, as I examine I found that your child theme stylesheet contains this snippet that is causing the error:

    @media (-webkit-device-pixel-ratio: 1.25) {
  * {
    zoom: 0.5;
  }
}

    once I added this to my demo site it also showed the error, this Zoom rule is making all elements half of their size, but nested elements are even smaller, for example, the text block “We Need Your Help” is normally 55px but with this rule it is 12px.
    So to solve your issue please remove this rule, you don’t need to add any rules for Windows scaling as you can see with our 2017 Demo it responds correctly to desktop scaling.

    Best regards,
    Mike

    December 14, 2021 at 12:16 am #1332676
    Hurricane4x

    Thanks!

    I went in and things seem to be fixed after changing that.
    Thanks for your help!

    December 14, 2021 at 12:53 pm #1332743
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Windows scaling Issue in Edge browser’ is closed to new replies.