Print Page | Close Window

SensBlack smooth scroll issue on mobile

Printed From: openElement Website
Category:

openElement


Forum Name: Templates
Forum Description: Questions about templates? Sharing a custom template? Post here.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=1323
Printed Date: Mar 28 2024 at 1:24pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com


Topic: SensBlack smooth scroll issue on mobile
Posted By: pltfnc
Subject: SensBlack smooth scroll issue on mobile
Date Posted: Feb 15 2018 at 4:46pm
Hi all, 

I am using the beautiful SensBlack template. There seems to be an issue with the smooth scroll to anchor on mobile. When selecting a link to an anchor in the pop up menu, it doesn't always scroll to that anchor. Rather, the requested anchor stays stuck down below and it takes a long swipe for it to come up. This only seems to happen the first time the site is loaded or the browser is refreshed. I suspect it has to do with the Smooth Scroll to Anchor? Same thing happens on a narrow window on Win10. 

Any thoughts would be very appreciated!
Thank you,
Franco
Web Page Link: www.francoplatino.com



Replies:
Posted By: Dmit OE
Date Posted: Feb 15 2018 at 9:43pm
Hi,

I don't reproduce the problem with Chrome narrow width Win10. What is your browser and Internet connection speed?


Posted By: Dmit OE
Date Posted: Feb 15 2018 at 9:43pm
P.S. Do you reproduce the issue with this copy:

http://sensode.net/senswhite/" rel="nofollow - http://sensode.net/senswhite/


Posted By: pltfnc
Date Posted: Feb 16 2018 at 2:43am
Hi. Thank you. 

My internet connection speed is around 50Mbps, symmetric. The issue happens both with Chrome and Edge on Win10 (narrow window). The menu "discography" seems to be the most problematic. Please try to go to "discography" on a narrow window using the mobile menu before scrolling through the site. You'll see that it won't actually bring it up and, instead will only show the background. 

The same issue happens on Android 8.0, 8.1, and 7 (that I have tested) and on iOS phones and tablets (both on WiFi and data). On the actual mobile devices it also happens when,  at first load or after refreshing,  you simply touch the triangle down (which should bring to "biography"). 
However, once you scroll the entire site at least once, then all works fine.

The issue does not happen on  http://sensode.net/senswhite. However, this site is having the same mobile menu transparency issue on iOS (the same issue you helped me fix the other day).


Thank you!



Posted By: Dmit OE
Date Posted: Feb 16 2018 at 8:22am
Yes, as it doesn't contain this workaround.

You probably have some obsolete version, or added something to your website that compomises the scroll. You may try to remove things, or add them to the latest version of the template (you can create a new project with it in OE)




Posted By: pltfnc
Date Posted: Feb 16 2018 at 12:12pm
OK, thanks. I am using OE 1.57 R9 and the SensBlack template from it. The entire website is brand new as of last week. Is there a new template I should have found?

Would you be able to test this francoplatino.com/TMP1/index.htm
I just created it from the same template, brand new without changing anything. But the same issue happens here. If you go to Gallery from the mobile menu at first load, it will scroll to gallery, but it will take another manual swipe to actually bring up the pictures (which is the issue I am having with francoplatino.com in Discography. This is happening on Andrdoir, iOS, and on narrow window on PC.

Please let me know. I really appreciate your help!


Posted By: pltfnc
Date Posted: Feb 16 2018 at 12:32pm
P.S. The template SensWhite appears to have the same identical issue with it's gallery anchor. 

I just created a new webiste using the template without changing anything. It can be tested here: http://www.francoplatino.com/TMP2/index.htm

Would you be able to give us a workaround or suggestions on how to make it work properly?

Thank you


Posted By: Dmit OE
Date Posted: Feb 16 2018 at 12:52pm
I still can't reproduce it in Chrome.

Try to remove the Custom Class apply-smoove for all elements where anchor does not work, or even better, find the Code Block Source Type HTML or OtherScript on the page or one of its base layers which contains this:


  <script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>
  <script type="text/javascript">
  $(function(){// Scroll reveal (apparition au scroll) :
      (new ScrollReveal()).reveal('.apply-smoove', { duration: 1000, distance: '500px' });
  });
  </script>


change .apply-smoove to .apply-smoove-off-test, save, and test whether it improves anything


Posted By: pltfnc
Date Posted: Feb 16 2018 at 2:25pm
I removed the Custom Class apply-smoove transitions ( in the expert section) from all the elements of the discography. Now it does show the content of that section of the website without needing the additional finger swipe. HOWEVER, obviously, it removed the cool looking smoove effect from that section.

Any way to add the effect back?
Would it maybe work if added to the anchor itself or any particular element?



Posted By: pltfnc
Date Posted: Feb 16 2018 at 2:48pm
Ah. Believe I fixed the issue! Just applied smoove to only specific elements. 
Perhaps the template should be fixed as well. 

Thank you for your help! Very much appreciated!


Posted By: Dmit OE
Date Posted: Feb 16 2018 at 4:06pm
What's strange is that I still didn't see this behavior. But well I will tell Brolysan. To what elements did you apply the smoove?


Posted By: pltfnc
Date Posted: Feb 17 2018 at 2:59am
So, the Gallery in the SensBlack template has a main container for groups of elements with smaller containers inside of it. I did the same in my website in the Discography section.

If the smoove is applied to the main container, it "smooves" up but doesn't bring along the smaller containers that are inside of it. So all you get is the background of the main container until you do another finger swipe up. 

If you apply smoove to all the containers (the main one and the ones inside of it), they seem to conflict with each other and the sections "smooves" up to somewhere in the middle of the large container, not the top. 

I found that if I apply smoove to the smaller containers or frames (but NOT to the main one that contains them) it all works well. 

However I also found that if there is too much padding between the smaller containers and frames (meaning: if the margins are too big), only the first one will come up with smoove and the other ones will come with more scrolling. Removing a 20px margin from the top of the smaller containers fixed that.

The issues above only happen on mobile (iOS and Android) or narrow windows on the computer.

I hope this makes it more clear

Thanks again!


Posted By: Dmit OE
Date Posted: Feb 17 2018 at 12:37pm
Hi,

Yes those are good trails, thank you


Posted By: brolysan
Date Posted: Feb 17 2018 at 1:04pm
it s possible to send me your projet at wetransfer.com (email contact@sensode.com) for tested it?
thanks


-------------
http://sensode.com


Posted By: brolysan
Date Posted: Feb 17 2018 at 3:22pm
Hello, could you please test http://sensode.ovh/franco/" rel="nofollow - this page ?


Posted By: Speed Racer
Date Posted: Dec 12 2020 at 3:10pm
Hi.  I am having the similar issue as pltfnc was having when using the SensBlack template. The issue I'm having is that on my website, when scrolling down, the container of elements below appears to get STUCK (below), before appearing (fading-in). As a result, there appears only a blank background until the container of elements below appear.  This is somewhat apparent on a desktop, but VERY apparent on my iPhone where I might have to make 3 or more complete screen swipes before the lower container of elements appears (fades-in). 

From what I can tell, the SensBlack template has been updated from that of 3 years ago (the date this thread started) in that pltfnc remedy of applying "apply-smoove-transition" to the smaller containers (not the main one) that fixed his problem - has now been updated in the current SensBlack template.  However, I could be wrong.

I am using your most-current SensBlack template, on a Windows 10 PC, with a fast internet connection. And, I have installed my site at 2 different web hosting companies, with the same result.

This is my website: https://www.radioshackcatalogs.com 

If you would be kind enough to try viewing this site on an iPhone (or mobile device), SLOWLY swipe-up until the container of elements appears, and it should be very apparent as to what I mean.  I just tried it and it took me 7 complete screen swipes before images appeared. 

The problem does replicate on a desktop PC, but the experience is not as drastic.

Thank you.




Posted By: Hobby001
Date Posted: Dec 12 2020 at 10:11pm
The issue might be caused by the large number of images that are included into the group of elements WE72cf79e74b

Try removing the css custom class apply-smoove from WE72cf79e74b Custom Classes list

https://zupimages.net/viewer.php?id=20/50/aer6.jpg" rel="nofollow">


-------------
https://denislafrance.net/index.en.php" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7WE2oJe9pX8_3u0FerqJwjo" rel="nofollow - , OE training video



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net