So i have a page transition for page loading. When clicking a link and the page transition animates the page scrollbar disappears = resizing the page, then it reappears when the animation is done. This makes the page “flicker”, You can see this from the published site.
Ive tried adding ; scrollbar-gutter: stable, tried in head/ body /code embed, to no success.
Im glad for any suggestions, thanks!
The io published site to view the “flickering”:
Here is my site Read-Only:
Hi there,
Scrollbar flickering during page transitions can be addressed through several approaches in Webflow. Here are some common solutions:
The flickering is often caused by content reflow during page transitions. You can minimize this by setting a fixed width on your main container that accounts for the scrollbar width (typically 15-17px). Additionally, adding the CSS property ‘overflow-y: scroll’ to your body element ensures the scrollbar is always present, preventing the layout shift.
For smoother transitions, you might also want to check your page transition settings under the Page Settings panel. Ensuring your transition timing is optimized can help reduce visible flickering effects.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
So ive tried adding fixed width to the different main containers;
body , page_wrap / page_main. Gave no result.
Same with 'overflow-y: scroll’, I tried adding it to the body, custom attributes, in page settings custom code.
This code;
/width
::-webkit-scrollbar {
width:0px;
}
/track
::-webkit-scrollbar-track {
background:transparent;
}
/thumb
::-webkit-scrollbar-thumb {
background:transparent;
}
Removing all scrollbars technically solves the flickering. But can be annoying not being able to scroll a long page.