Home page scroll blocked

Wappler General
1

Hi everyone, I'm doing LIVE tests on my site and I noticed that on mobile the home page doesn't scroll when first loaded.
If I do a refresh everything is ok, just like if I go to mobile emulation from Chrome.
This is the link to the site if you want to try www.yoocare.net from your devices

Thank you

2

image
image1184×242 47.8 KB

overflow: hidden on your body does that...

When refresh page this css rule is not there and works as it should...

Maybe a conditional class or a css that triggers when it shouldn't

3

I can recreate this 100% of the time. As soon as you accept the cookie consent it locks the page. Even on mobile, with the consent modal showing I can still scroll. As soon as I accept the cookie it locks the page in what ever spot it was scrolled to.

So something on your dismissal of the cookie consent modal is locking it.

4

On that note try disabling the backdrop on the modal... See if that resolves it?

5

Thanks for the replies.
Certainly the problem is created by the modal which applies the overflow hidden class as reported by famousmag.
At the moment I haven't found any other options to avoid the problem, so when accepting cookies I simply refresh.
I know it's not the best but it's just a temporary workaround.

6

Here’s a hack I used to get around this condition.

1 Like
7

Your solution works, I call thi function in closing event of the modal

 <script type="text/javascript">
    function removeOverflow() {  
      $('html, body').css('overflow', 'auto');
    }    
  </script>
1 Like
8

Hey @enriweb77 do you know how to reproduce this on a new project?
I was able to see the error few days ago and I want to inspect it with android studio.
But now I can see you call the workaround function, so can't search the issue anymore :thinking:

Thanks

9

Hi France,
I actually didn't understand well when the problem appears.
I have several pages with modals with the same settings but some give this problem and others don't.

You can try to set the visibility of the modal based on a parameter when loading the page (in my case the parameter was the cookie).

If I identify the case better I'll let you know

1 Like
10

You could try placing the modal source at the very end of you page outside the main container, ie the last code in your pages.

2 Likes
12

@patrick
I think something is wrong with preloader

On http://www.yoocare.net running this to override Enrico function:

window.removeOverflow = function() { };

And blocking dmxAppConnect/dmxPreloader/dmxPreloader.js
Seems to be working and no more freezing.

(Previously removing application - cookies - accept: Y in order to see modal again and again)

Tested a few times, and unblocking freezes the page again.

1 Like
13

1 Like
14

Thanks for the research, it indeed seems to be a conflict with both the preloader and the modal code. The preloader does the same as a modal, it blocks the page and prevents scrolling untill the page finished loading. The modal does the same and both restore the state back afterwards. The problem is that they overlap, the preloader first sets overflow hidden and then directly after that the modal sets overflow to hidden. The page is loaded and the preloader restores the overflow allowing the page to scroll again (the reason why scroll works under the modal) and when the modal is closed it restores the state, but it restores it to overflow hidden since it was that when the modal was shown.

Not sure how to fix this, can't change the bootstrap code and only changing the preloader will not solve the issue. Workaround is to not use preloader or wait with showing the modal until page is loaded and preloader is hidden. Will see if I can perhaps update preloader to not use overflow hidden or do it in a way that doesn't conflict with the bootstrap modal.

1 Like