Topic: Parallax Image Abruptly Changes Size Upon Scroll
Expected behavior: Buttery smooth parallax scrolling.
Actual behavior: Background image abruptly changes size at a specific scroll position (see video).
Resources (video demo): Video Demo!
Code Snippet:
<!-- Hero -->
<div
id="home"
class="view jarallax"
data-jarallax='{"speed": 0.2}'>
<div class="mask rgba-black-strong">
<div class="container h-100 d-flex justify-content-center align-items-center">
<div class="row smooth-scroll">
<div class="col-md-12 white-text text-center">
<div class="wow fadeInDown" data-wow-delay="0.2s">
<hr class="hr-light">
<h4 class="subtext-header mt-4 mb-3">Welcome to Brookside!</p>
</div>
<a type="button" href="#map-section" class="btn btn-rounded btn-outline-white white-text wow fadeInUp" data-wow-delay="0.2s">Map</a>
</div>
</div>
</div>
</div>
</div>
<!-- /Hero -->
P.S. Every MDB template with parallax I use suffers from this same issue.
Issue is on both Android and iPhone.
The issue does not seem to occur in the web browser when viewing in inspect mode set to mobile screen size. It only occurs when you view on an actual phone.
Doesn't anyone else experience this problem on mobile phones?
How do I fix this?
I had to put my question in here because it is not possible to set the MDB version in a new post (field is gray, you cannot select anything, but it is expected to send the post)
Parallax really works very well for me. Great job!
But the picture I use is extremely zoomed in when I look at it on a smartphone. Is there a way to scale the image to the current screen size so that it can be seen completely?
Here is an good example: https://mdbootstrap.com/previews/docs/latest/html/parallax/index-v.html
Try to see the picture in a different screen size. It does not adapt to the size of the screen.
Regards
Grzegorz Bujański staff commented 5 years ago
Hi, yes. You can set imgSize options when you init paralax: https://mdbootstrap.com/docs/jquery/css/parallax/#options
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.11
- Device: phone
- Browser: Safari and Chrome
- OS: iOS and Android
- Provided sample code: No
- Provided link: Yes
Mateusz Łubianka staff commented 5 years ago
Hi @TheNullSpace,
You're right, there is a little issue on mobile devices. I created a task and our team will check it and fix as soon as possible. Thank you very much for this post.
Best,
TheNullSpace commented 5 years ago
Can I suggest that you replace the current implementation of parallax with the rellax library? It is amazing! I am using it in place of MDB's parallax but it is difficult to replace the way you guys use parallax with the way they do it. It would be nice if you integrated it into your library with an interface like the current parallax interface you guys have.
Mateusz Łubianka staff commented 5 years ago
@TheNullSpace,
I'll attach your idea to task with parallax issue and our team will concern all pros and cons. Thank you very much for your opinion :)
Best,
TheNullSpace commented 5 years ago
Hi Mateusz,
has the issue been fixed yet?
Mateusz Łubianka staff commented 5 years ago
@TheNullSpace, I am sorry but it is not fixed yet. Our team will work on this task in nearest sprint. Best,
B.L.o.w commented 5 years ago
I've been having the exact problem. Precisely as described. Fixing the bug will be appreciated.
Grzegorz Bujański staff commented 5 years ago
Sorry about that. We're working to fix bugs in many of our components. Unfortunately, this one has not been fixed yet.