Setting one element to "fixed" prevents entire site from scrolling in designer

Just what the subject says:

Works when published: http://organ-donor-bike-wear.webflow.io/

Doesn’t work in designer: https://preview.webflow.com/preview/organ-donor-bike-wear?preview=f3e04b3b35ef8a83ef145167122720b8

Only way to get the page to scroll in the designer is to give the body a class and set overflow to scroll. It WORKS, but that is a hack, and this is a bug.

TO REPRODUCE:
Select Body. Set overflow scroll to visible. Designer will no longer scroll.

With Body overflow still set to visible. Select Hero. Set to relative. Designer will now scroll.

Hi @Cricitem,

While I was testing I wasn’t able to reproduce this behavior on my end - Here is a GIF following your directions - I am not finding a scroll issue neither in the Designer or Preview mode.

Can you add some more information, so that I can investigate further?

Thanks!

You’re actually displaying the issue there on your video, you just didn’t notice it.

I’ve been continuing to work on the project, so I’ve added height. It looks like what is happening is the designer is artificially shortening the page to effectively remove the fixed element from the flow (it is simulating the effect), but it appears as if it is NOT then adding in the top-margin on the Store Section that is meant to remedy the placement challenges of having a Hero taken out of the flow.

Do what you did again. You’ll notice that the page stops scrolling midway through the Content Section. There is still content below the bottom of the screen, but the designer won’t scroll down to show it. Preview mode ALSO won’t scroll down to show it. But, when the site is published, the browser renders the site properly.

Hi @Cricitem, this may be due to the behavior of “Collapsing Margins” which is due to a user adding a margin-top to an element under the Body. When the body does not have a padding-top value, it will make it so that the margin value cannot be scrolled.

I would change the 40vh top margin you are using and use top padding instead and see if that works better.

See here:

https://cl.ly/0D3e312U1X1i/Screen%20Recording%202018-03-20%20at%2007.40%20PM.mov

The team is working on a solution to warn users about this in the designer and will post about the update when it is pushed out.

I hope this helps.

I’ll switch it to padding, but it works when published. It’s the designer and preview mode that are having troubles with it.

Hi there, yes, that is correct, this is affecting he designer only, it should be ok on the published site.

I hope this helps.

1 Like

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