It looks like mobile rendering is causing some kind of jump when redirected from another page. I've tried everything I can to figure it out and finally thought I'd reach out to you. Here are steps to reproduce:
Be on a mobile device (I'm using Safari on iPhone , iOS 12.4).
Go to this page: http://www.northcoastcalvary.org/btc/ There is a link that says "web" that is a bit hard to find on the page: "(Shawn Nelson – Coordinator | email | web)" Find the "web" href and click it on your mobile browser. You might even be able to click on the "web" href included in this ticket... not sure.
After it loads on the mobile browser, it will automatically scroll the page down. It will not just sit at the top like you'd expect. Please see example screen showing where it scrolls to.
Yes, I've confirmed that you can simply click an href from this page and it also shows the scrolling problem. Here you go: click me on mobile to see scroll issue
It seems that the issue is related to some components on the page, however I have added a JS code that will prevent this page jump on initial load of the page:
Hmm... I was testing the page some more and it looks like this solution won't work after all. If you click the "Load More" button it also triggers the javascript and scrolls to the top of the page. Is there any way to modify the js to prevent that? I've left your js on the site so it's easier for you to see: click me on mobile and then click "Load More" button to see issue
It looks like mobile rendering is causing some kind of jump when redirected from another page. I've tried everything I can to figure it out and finally thought I'd reach out to you. Here are steps to reproduce:
Thanks!
Yes, I've confirmed that you can simply click an href from this page and it also shows the scrolling problem. Here you go: click me on mobile to see scroll issue
Hi suntereo,
It seems that the issue is related to some components on the page, however I have added a JS code that will prevent this page jump on initial load of the page:
<script> jQuery( document ).ready( function( $ ) { var winWidth = $( window ).width(); if ( $( 'body.home' ).length && winWidth < 769 && window.location.hash.length === 0 ) { var resetST = function() { $( window ).scrollTop( 0 ); } setTimeout( resetST, 500 ); $( window ).on( 'grid:items:added', function() { setTimeout( resetST, 100 ); } ); } } ); </script>Tested and it worked. Please note that this fix is some sort of "hack" but it will prevent that undesired behavior.Thank you so much!!!!!
Hmm... I was testing the page some more and it looks like this solution won't work after all. If you click the "Load More" button it also triggers the javascript and scrolls to the top of the page. Is there any way to modify the js to prevent that? I've left your js on the site so it's easier for you to see: click me on mobile and then click "Load More" button to see issue
Hi suntereo,
It seems this issue is related to WPBakery element that pulls out the articles.
I am going to screen record this issue and ask them for a solution:
With our theme:
https://d.pr/v/kYvFWb
With default wordpress theme:
https://d.pr/v/BF2oa9
The thread is posted here and we are expecting an answer from WPBakery team:
https://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431/comments?page=1033&filter=all#comment_22638183