Hi there,
If I enable parallax scroll (which I really like), its lagging like hell 
It makes me mad. Can somebody help?
Thanks a lot
Shouldnât there be some kind of a âdebounceâ function?
I found this related to the issue: javascript - Parallax scrolling jumpy in safari ios - Stack Overflow
Any workaround on this one maybe?
Thanks!
Same problem here? Banner image stack - recommended size of image for parallax effect to avoid magnification and jumping image when page loads
Good morning @_mikes and welcome to the forum.
If you can help us out a bit and describe what you see as âlagging like hellâ as well as give us a live URL to view the problem that would be much appreciated.
âDebounceâ doesnât mean what I believe you think it means in this case.
It is hard to know since Iâve not seen the problem youâre experiencing or had a full explanation of it in order to troubleshoot it. That said, the thread you linked to was cleared up already if you read to the threads conclusion.
Hi Adam,
Thank you for picking this up quickly and sorry for the poor description (you are right 
)
So the live URL is: Untitled Page | My Website
The stuff I used (nothing extra here):
- Foundry Control Center
- A Banner (with a stock photo)
- A Heading
- A Paragraph
As for the Banner set up:
- I set the Banner to be a Hero Banner
- I enabled Parallax Effect
- Set the Parallax Style to scroll
- Set the Parallax Speed to 0,50
Please check the site above on a mobile phone (I tested on iPhone 8, iPhone XS, Samsung Galaxy 7, Samsung Galaxy 9). Iâm experiencing the same issue across all the mobile devices: chunky-bouncing-enlarging âeffectâ when scrolling on the page on mobile. Just look at the car.
I provide you the inspector details related to the Banner as screenshots
I also provide the screen recording from my phone (iPhone XS): https://drive.google.com/file/d/1gLyO7AJP8TfIk3OciZwjMuYTi_7RK2ie/view?usp=sharing
If you need the project file, pls let me know and I more than happy to send you.
Thank you for your help!
https://drive.google.com/file/d/1gLyO7AJP8TfIk3OciZwjMuYTi_7RK2ie/view?usp=sharing
Iâd like to look at the project file if that is possible, please. In the ZIP file you send with your project, please also include a copy of the image youâre using for the banner.
All I am seeing currently is the oversized image from the Hero Banner feature, locking into place as you start to scroll down the page⌠when that happens the image is getting scaled down a bit to become a parallax image.
Iâll take a look at it though when you send it over.
Sent to you in direct message.
Thank for your help!
Iâve looked at the test project you sent, and have found the problem. Youâre not going to like the answer though I suspect, as it relates to the browser. It relates to how iOS deals with its browserâs âchromeâ. What do I mean by âchromeâ though?
In the iOS browser you have these items as a part of the browserâs âchrome,â which you see highlighted in red:
That means the Banner stack, and its parallax javascript see this area, highlighted in orange, as the available space:
The problem occurs when you start to scroll upwards using iOS. That browser âchromeâ shrinks down and parts of it disappear, like so:
This means the space that the parallax javascript sees as the full available space has now grown, so it recalculates the sizing of the background parallax image. This is the jump you see as you start to scroll down the page.
If you watch your video you made again youâll see that the jump happens as that browser âchromeâ changes: RPReplay_Final1553868590.m4v ⢠Droplr
While the browser âchromeâ shrinking and condensing itself to give you more space is clever on Appleâs part, it is causing the available space to change dynamically, and thus the calculations for the available space for the parallax effect also changes. I have no way of making the browser chrome not affect the parallax stack in this way.
The reason this is a problem with the Hero Banner and Parallax combination in particular is that it is using the full, current available space of the browser window on the iPhone. The Hero setting makes sure the bannerâs height is always equal to the full available space of the browserâs viewport. If you were to use a non-Hero-Banner, and instead use a flexible height youâd likely not see this problem as the calculation is not being affected by the height change of the available space in conjunction with the Hero setting.
Since your Mac OS X browser(s) donât do this youâre not seeing the problem there. This is because the available space isnât changing while the parallax effect is happening on your computerâs browser.
1 Like
Hi Adam,
Thank you for your instant help and that you thoroughly tested the issue, finding the solution. I really appreciate it!
My first idea also was the (in my words) âaddress barâ to be guilty here.
That is why I tested it on other mobile platforms (Android and Google Chrome browser). Unfortunately, the same issue occurs on every phone I tested, not only iPhone so this is probably not the iOS to blame here.
I also tried to operate with non-hero banner before opening this topic, and also a few minutes ago after you suggested it, but without luck. The same âglitchâ is present on fixed sized banner type.
As much as Iâm in love this scrolling parallax effect, unless there is a method or a workaround I think Iâll have to let it go and not use parallax on my banners with Foundry 
Iâve tried, using your project, to recreate the problem with non-Hero-Banner images and have not yet seen the problem here.
Honestly it is a pretty minor thing in my eyes, but if it isnât looking how you like that would be a call you would need to make.
I wasnât blaming iOS â letâs make sure Iâm clear there. I am simply showing how the browser chrome changing size and / or being removed by the browser is the âproblem.â My examples to you were using iOS-based browsers as that is what I have available to me.
That said â it isnât really a bug, but instead an interaction between the two things that is producing an outcome that is less than stellar. The browser is functioning as it is programmed to do, and the stack (in this case the Parallax plugin) is also functioning like it is supposed to. Theyâre simply not interacting with one another exactly the way you want them to in this case.
Again, I donât think it is an astronomical problem, but that is just IMHO.
Sure, not that big of an issue, I was just looking for perfection. No problem.
You can close this topic.