Image hero banner parrallax scroll chunky on mobile


#1

Hi there,

If I enable parallax scroll (which I really like), its lagging like hell :frowning: It makes me mad. Can somebody help?
Thanks a lot


#2

Shouldn’t there be some kind of a ‘debounce’ function?
I found this related to the issue: https://stackoverflow.com/questions/25335829/parallax-scrolling-jumpy-in-safari-ios
Any workaround on this one maybe?
Thanks!


#3

Same problem here? Banner image stack - recommended size of image for parallax effect to avoid magnification and jumping image when page loads


#4

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.


#5

Hi Adam,

Thank you for picking this up quickly and sorry for the poor description (you are right :hugs:)
So the live URL is: https://okolicsanyi.hu/parallaxtest/
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:

  1. I set the Banner to be a Hero Banner
  2. I enabled Parallax Effect
  3. Set the Parallax Style to scroll
  4. 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!


#6

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.


#7

Sent to you in direct message.
Thank for your help!


#8

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: https://d.pr/v/G0r7Q1

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.


#9

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. :frowning: 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 :disappointed_relieved:


#10

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.


#11

Sure, not that big of an issue, I was just looking for perfection. No problem.
You can close this topic.


closed #12