Webflow Editor login widget adds annoying page content jump when scroll bar loads

Community resources Bugs
1

This is perhaps not directly a Webflow problem, but perhaps somebody know a solution. On some webpages (e.g default Webflow pages) the browser scroll bar seems to load after the page content, making the content jumps to the left to make room for the scroll bar when it loads. So, when you navigate from one page to the next, the page first jump to the right, then back to the left. It’s not a big problem but a bit annoying. Some pages do not have this problem, I’m assuming that it has to do with how the html is structured or some script is used…?

EDIT:
The problem seems to be the Webflow editor login widget that pops up in the lower right corner. Looks like this adds an empty scroll bar that loads after the page content. Not a big problem if the designer and the customer is the only one that see the page jumping, but still a bit annoying.

Video example from Chrome with Webflow Editor login widget

Video example from browser without Webflow Editor login widget

BR
Christoffer

2

Hi @Christoffer thanks for the video. It really helps us see the issue completely.

Can you please provide a read-only link so i can investigate this further?

3

Hi Nelson

Here is a preview link

4

thanks :slight_smile:

Try removing flexbox for that container and settings the text to the right:

CloudApp

Hope this helps

5

Thanks for your reply @PixelGeek :slight_smile:

Hmm, is it just me? I cant see any change. I notice that the jumping just occur then the scroll has no content to scroll. If the page height is higer than the screen, the page do not jump. If the scroll is “empty” it does the jump…

It’s not just the submenu container that jumps, it’s the entire site, including the body.

6

oooo i also noticed you’re using a custom font. I think this is a common issue with “flash of unstyled content”

Since it takes a second for Google to load in your font. What you can try is adding a preloader to your pages with IX2

7

Thanks for the tip Nelson, will look in to this! :slight_smile:

C

1 Like
8

Alternatively, paste this custom code into Site Header Code and publish. This will force scrollbars on all pages, so if you navigate from a page without scrollbars to one with, or vice-versa, you do not see the content/header “jumping” from changes with the scrollbar.

<style>
body { overflow-y: scroll !important; }
</style>
1 Like
9

Hi @samliew

This is the type of solution I was looking for, but your script now gives me two scroll bars, the default scroll bar is loaded on top of the one set by your script :sweat_smile:

Page with Samliew’s script added

Webflow seems to add a forced scroll bar by default, but after the page content is loaded!

10

That’s weird, I only see one though

Screenshot_2018-02-20_190235
Screenshot_2018-02-20_1902351093×696 221 KB

11

Hah! The problem is only in the Chrome browser! Firefox, Opera and Edge only has one scroll bar! So, this is actually a Chrome bug/feature then… Hum, is there a work around on this? :thinking:

12

The “bug” does not happen in Incognito mode, but it does happen in Normal mode with all chrome extensions turned off. I’m starting to suspect that the “bug” has something to do with the Webflow Editor login widget that pops up in the lower right corner since this is the only thing that is different from Chrome and other browsers.

(See first post for updated info)

13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.