Hi convertorab,
Thanks for reaching out. Ideally, in the future please open a new thread as it makes it easier for all parties involved to keep track of replies.
It seems like the metod used by the plugin to stretch content outside the initial container by calculating negative margins is causing CLS.
That’s correct. Unfortunately, it’s unavoidable. When using the Full Width Stretch Row Layout we need to bypass the themes container and to do that a shift has to occur. We can’t automate this process to happen any sooner than it already due to compatibility reasons, and there’s no way to automatically bypass or override a theme container in an automated manner without potentially (as it is possible to reduce/avoid) triggering a CLS without introducing further compatibility issues.
You can, however, reduce how much of an impact this has by using performance-related plugins, such as Autoptimize (how to), and adding the following CSS to their Critical CSS sections:
body.siteorigin-panels-before-js .siteorigin-panels-stretch {
margin-right: -1000px !important;
margin-left: -1000px !important;
padding-right: 1000px !important;
padding-left: 1000px !important;
}
That CSS will force the rows to the sides of the page, and prevent the CLS as much as possible on load and then the PB Full Width container breaker code will run and override this with the correct margins and padding to get the expected result.
It should be noted that CSS is present elsewhere, but it’s typically minified/merged so it’s not always loaded quickly enough to avoid this CLS. I’ve logged a feature request to explore adding this CSS inline to avoid this.
Kind regards,
Alex
