Custom Footer touch scroll on tablet and mobile getting stuck

Support
#1

Hey guys,

Thanks in advance for your support. I’ve just finished building a custom footer and I’m having some problems with the touch screen scroll. When scrolling on a mobile or tablet device the footer area gets ‘stuck’ and is not responsive to touch. This does not happen to the page sections built with cornerstone, and only within the custom footer area. The issue affects both mobile and tablet touch devices.

Did you happen to have any recommendations?

With regards,

#2

Hey there,

I checked and your footer works fine. Would you mind providing more details and screenshots or screen recording of the issue?

Thanks.

#3

Hi Christian,

Thank you for following up. The issue with the page scroll is still occurring. I’ve attached a link to a video showing the touch screen issue. You will notice that it is only located in the Pro custom footer area and does not affect the rest of the page.

video showing issues with mobile scrolling on Pro footer

Thanks in advance for your support.

With regards,

#4

Hey again,

I was able to localise the issue to the content scrolling area. When content scrolling was ‘on’ the touch screen was not responsive, however when it was off the touch screen works as normal. However when I turned scrolling off on desktop I had have a second scrollbar and large white area below my footer that I couldn’t seem to remove even when I reduce the size of each footer area.

I was able to remove it and balance out the height with the following in CSS:

.fm1.x-bar-content {
max-height: 100% !important;
height: 100% !important;
}

Though it appears when content scrolling is ‘on’ touch scrolling on mobile gets really glitchy.

Thanks again, have a great day.

#5

Hi there,

Thanks for sharing! Though I checked this on my install and I’m not getting the similar issue. What device and browser you’re testing this with?

I’d like to see your footer setup too, would you mind providing your login credentials in a secure note? Though, if you fixed this already then maybe I may not find that issue.

Thanks!

#6

Hi Rad,

The issue is still in the background and is still currently happening. Sometimes the overflow sticks out on page load as well, so I’m not sure what the issue is. I’ve attached logins and would be happy for you to have a look and see where the issue is. At this time the fix I have appears to only be a band-aid and not resolving the original issue. In the footer builder I can’t seem to remove the white overflow hanging at the bottom of the page unless content scrolling is turned on, but that appears to cause other content scrolling problems. The issue is currently affecting the Desktop and tablet sized bar of each footer (they all have the same style settings).

Warm regards,

#7

Hi there,

I can’t really reproduce it, I turned on and off the content scrolling and there is no issue with the footer. What’s your browser and IOS version? And you said that desktop and tablet are affected too but I can’t reproduce it either. What’s your desktop OS?

Thanks!

#8

Hi Rad,

Sorry for the confusion. There are two issues. The first issue is to do with mobile scrolling when “content scrolling” is on. This issue was found when using both iPad and iPhone devices, browsing on chrome and safari.

The second issue is with the length of the footer content area, which I haven’t been able to fit into the bar section of the footer on Desktop. This results in an overflow, which I can’t seem to fix when I tried changing the spacing of both the bar and content container heights, so I wasn’t sure how to fix that one. I managed a temporary fix with:
.fm1.x-bar-content {
max-height: 100% !important;
height: 100% !important;
}
which manages the height of the bar content area and fits it into the area correctly, but I couldn’t find a way to do this in the footer builder. However the overflow (and double scroll bars) can come up sometimes.
Is there a way to more effectively manage the height of x-bar-content in the footer area rather than relying on the CSS for the fix?

Warm regards,

Bernard

#9

Hi there,

Thanks for the clarification.

Yes, I’m able to reproduce the issue with content scrolling in IOS. I will forward this as a bug and for the meantime, please turn off the content scrolling option.

Does the height issue also happen when content scrolling is on? Because, yes, I can confirm that too.

When content scrolling is on, this CSS is turned active.

.fm1.x-bar {
    height: 550px;
    padding: 7.5vw 0.75em 7.5vw 0.75em;
    z-index: 0;
}
.ps-container {
    -ms-touch-action: auto;
    touch-action: auto;
    overflow: hidden !important;
    -ms-overflow-style: none;
}

Please turn off that option for now.

Thanks!

#11

Hey there,

You’ve withdrawn your post, let us know if you need any assistance.

Thanks!