Canvas Support

sticky footer content | scrollproblem

9 replies · opened Feb 3, 2021

SstookyFeb 3, 2021

hello semicolon

I have a problem with the scrollbehavior of the content on the sticky footer.
to show you what I mean, please have a look at the very short video (1:10 min/s).
https://www.dropbox.com/s/akra2tl3mny9uv9/footer_content_problem.mov?dl=0

I thought it might be a z-index problem and played around, but it seems to be sth. else.

rgds,
guido

oh and btw I use the plugins.js files you provided in the ticket
http://support.semicolonweb.com/forums/topic/data-animations/page/2/
see yr last post on page 2

SstookyFeb 3, 2021

... and one more info that might help debugging

is the content is longer that does not happen, only on short contents
but as we will have even short pages e.g. error-404 page or a search result page with no-content-found ... and setting content to a dedicated min-width is no solution either to me :-(

rgds
guido

SstookyFeb 3, 2021

and another note ...

setting header to .no-sticky and the problem is gone

SSemicolon WebSTAFFFeb 4, 2021

Hello,

Hope you are doing well.

Thanks for your Patience and Thanks for the very Detailed Explanation.

We are looking into these issues, allow us some time while we are checking these in different browsers and configurations as suggested by you. We will come back to you with a solution and explanation within the next 24 hours. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SstookyFeb 4, 2021

I have to thank your for your awesome support and say sorry to bother you with all these little glitches.

as usual, this is by no means a showstopper for me, as it does not happen on pages with longer content anyway.
this leads me to the assumption, that it must have to do with the header and sticky-header / header resize when scrolling.

I made a few more tests.
when the page is longer and the header and footer are therefor not visible together in the viewport/visible area as the header is far more up on longer contents, this never happens.
and when they are both together visible, you can see how the content folds underneath the footer.

when scrolling very slowly down while the content folds under the footer, you can see that the moment the header goes from smaller size to the state where it is fully exposed at its 100px height .. whoops the content fold over the footer right in that moment.

there must be conjunction IMHO, maybe that helps ya ?!

rgds and stay healthy
guido

SSemicolon WebSTAFFFeb 8, 2021

Hello,

Firstly, please accept our sincere apologies for the delays in replying and Thank You for your immense patience!

We are still running multiple tests on this based on your Suggestions and we are yet to encounter this issue correctly. We did experience the Footer behave in the way as demonstrated in your Video but it is not consistent and occurs less than 5% of the time for us. However, we are still working on determining why this is happening, so we would request you to please allow us some more time in testing and finally finding a possible solution for this issue.

Additionally, it would be great if you can let us know which Browser/OS you have experienced this issue on so that we can make further tests. Thanks again for your Patience.

Meanwhile, please let us know if we can help you with anything else.

SstookyFeb 9, 2021

hello semicolon

I cannot stop to thank YOU for your awesome support.

macOS - High Sierra - 10.13.6 (17G14042) - problem YES
safari - Version 13.1.2 (13609.3.5.1.5) - problem NO
chrome - Version 88.0.4324.150 (Offizieller Build) - problem NO

looks like it is only a safari problem and only when th scrollable content is that short, that footer & header are both visible when scrolled max down and up.

I feel embarrassed to occupy your precious tome with such a nasty little minor.
please forgive me and stop investigating.
my safari is not really up to date as high sierra is not delivering newer versions.
and as said it happens only on short content.

case closed and forget about it. sorry to bother. :-(

rgds & stay healthy
guido

SSemicolon WebSTAFFFeb 10, 2021

Hello,

Very Happy to Help! And fixing the issues you are facing is of utmost importance to us to ensure everything runs smoothly for you.

We have tried testing the Codes on High Sierra and YES, the issue exists! And this issue is related to a Bug in Safari and the way it handles position:sticky and z-index. We have tried troubleshooting this for a while now and finally happy to find a solution! :)

Add the following CSS Code:
[ch_pre]@media (min-width: 992px) {
.sticky-footer #content {
transform: translate3d(0,0,0);
}
}[/ch_pre]

Try applying this to the Page and let us know if this works for you.

Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

SstookyFeb 10, 2021

you guys are amazing !!!
works like a charm, thx a lot.

case closed

SSemicolon WebSTAFFFeb 10, 2021

Hello,

So glad this issue was resolved! :)

Do let us know if we can help you with anything else.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard