The body tag is hidden when the scripts are loaded
When the page is loaded, the opacity of the body tag is set to 0, resulting in a white flash upon page load.
When the GTM scripts are loaded, the body tag is hidden. This is because CSS (opacity: 0 !important; background: none !important;) is applied to the body, making it appear as if it's loading again. What could be the problem causing this issue? This code definitely did not come from our site's code.
✅ Solution:
The issue stems from the VWOCode third-party script. When the GTM scripts are loaded, the body tag is hidden. Actually, VWOCode applies this CSS (opacity: 0 !important; background: none !important;) to the body. When the page is fully loaded, it will remove the CSS from the body, resulting in a flashing effect.
This opacity adjustment is a technique the A/B tool uses to prevent the flickering effect when certain elements or sections of the page are changed through the variation code.
1. If you load the VWO code directly into the head tag instead of loading it through GTM, it will preventing the appearance of the flashing jerk.
or
2. To fix this issue, overwrite the CSS opacity to 1.
html body {
opacity: 1 !important;
}However, this may cause a flickering effect (where changes become visible to users) on the page if we run any A/B tests.