Short description
This Support document enables users to troubleshoot scroll issues with Google Chrome and Microsoft Edge 116 and later versions.
Symptoms
The following issues have been observed after updating to the August 2023 release of Chromium based browsers, Google Chrome and Microsoft Edge, version 116.
- Scroll jumps unexpectedly on screen when interacting with elements such as buttons, input fields, or checkboxes.
- Scroll position resets to the top when users scroll to the bottom of a page.
To confirm that the issue described above is related to version 116 update, perform the following steps:
- Downgrade the Chromium based browsers to version 114.
- Use other non-Chromium browsers such as Firefox.
If the issue persists, the issue may not be related to version 116.
Explanation
These issues are related to the recent changes in Chrome’s layoutFlexNewAlgorithm.
Solution
The following issues have been reported and Pega will follow up with Google:
Issue-1482775 (screens jumping on hover on controls or layouts)
Issue 1481533 (flex containers having style as "flex-direction" : "column wrap" became unusable)
Issue-1477891(Page Jumps Down when click in a Checkbox Element)
Meanwhile, we have identified several workarounds to help unblock clients experiencing the reported issue:
Perform the following steps to resolve the issue:
Solution #1
Temporarily downgrade the Google Chrome or Edge version to 115 or 114 or below.
Solution #2 (CSS Based)
Save-As UserWorkForm HTML Fragment into your open application ruleset and add the following CSS style block:
.chrome .flex.layout-content-default,
.chrome .flex.layout-content-stacked,
.chrome .flex.layout-content-simple_list {
flex-wrap: initial;
}
Solution #3
If your application involves the use of custom stacked layout formats, apply the below solution.
When we create a dynamic layout format in skin, we get 2 options for item arrangement, inline-grid & inline. Inline-grid renders items in stacked layout, this is the scenario where we get flex-flow: column wrap.
To mitigate the reported issue in this custom format scenario, if your format name is for example, custom stacked, use the following style snippet in the UserWorkForm fragment:
.chrome .flex.layout-content-custom_stacked {
flex-wrap: initial;
}