Render/Display UI Issue on Chrome 91.0.4472.77

After updating Google Chrome on version 91.0.4472.77 there are problems with the display of the UI.

The interface goes all the way down the screen and I’m unable to scroll down to see the information.

However it works fine on Internet Explorer / Edge.

Has anyone else faced a similar issue?

Thanks & regards!

@JesusS23

Is it specific to your application? How about if you login with [email protected]? Still the same issue?

Hi @MarcLasserre_GCS!

Yes, even if I Iogin with [email protected] I still get the same issue.

Hi @JesusS23 ,

We were also facing a similar issue with Pega 7.2.2. We added the below snippet in the bottom of pz-designer-studio-layout-overrides CSS File which did resolve the issue temporarily for us.

.iframe-wrapper {
top:24px;
}

But the home still renders blank. We may still need some help to fix this issue permanently.

Hope this helps!!!

@DeepakT5575, @JesusS23 , NascoMan

I had raised this issue with Pega. Post Chrome update to 91, most of the clients were facing the same problem. I was given the following resolution which has corrected the issue for me -

Below are the following steps on how to fix it:

  1. Log in to your Pega Dev Studio platform with another browser where you can work without disruption or Chrome using lower than 91 major version.

  2. Use the search box from the top right side and find the “UserWorkForm” HTML rule name then click on and open it

  3. Save as with the same name “UserWorkForm” rule to the appropriate ruleset you are using in your app

  4. Add the following line code like shown in the attached screen shot, save the rule and verify the behavior.

<style> body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content, body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content > .sectionDivStyle, body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content > .sectionDivStyle > .sectionDivStyle, body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content > .sectionDivStyle > span.inspector-span, body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content > .sectionDivStyle > span.inspector-span > .sectionDivStyle { height: auto; } </style>

Screenshot -

```
<style>
body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content, body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content > .sectionDivStyle, body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content > .sectionDivStyle > .sectionDivStyle, body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content > .sectionDivStyle > span.inspector-span, body.with-fixed-header .screen-layout-region-main-middle > .screen-layout-region-content > .sectionDivStyle > span.inspector-span > .sectionDivStyle {
    height: auto;
}
  </style>
```

Hi @JesusS23,

Kindly refer to this article

https://community.pega.com/knowledgebase/articles/pega-platform-troubleshooting/troubleshooting-tab-rendering-issues-after-updating-google-chrome-91

Hope this helps!

@aggad Excellent! Thank you!

@AparnaGopakumar Excellent! Thank you!!!

@JesusS23

Do you mind sharing a screen shot or two? Any obvious error when running your browser developer tool?

Hello @MarcLasserre_GCS

Please find the following screenshots. In the first to screenshots you will see the behavior. Then two screenshots with a workaround, which was suggested here: UI Problem on Chrome 76.0.3809.100 | Support Center

There are no errors in Chrome dev console, just the content seems to be displaced.

However if I update manually in Chrome the style position to relative for the snippet below, it seems to fix the issue at least for the duration of the session.

This is the css snippet:

.ff #workarea .static-dc-tab, .wk #workarea .static-dc-tab, .wk #workarea .tabContent .dynamicContainer, .ie11 #workarea .static-dc-tab, .ie11 #workarea .tabContent .dynamicContainer, .ie10 #workarea .static-dc-tab, .edge #workarea .static-dc-tab {
    position: relative;
}

Thanks & regards!

@JesusS23 I am having the same issue. It seems like the current version of Chrome just released is not playing nice with Pega 7.2.2. Is there any fix? I am able to continue with Edge for now, but I prefer Chrome.

Hi @JesusS23!

Did the link that @aggad sent over resolve this for you? If so, please mark their reply as the Accepted Solution!

Thank you!