Parallax Image Abruptly Changes Size Upon Scroll

Topic: Parallax Image Abruptly Changes Size Upon Scroll

TheNullSpace free asked 4 years ago

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?

Mateusz Łubianka staff commented 4 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 free commented 4 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 4 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 free commented 4 years ago

Hi Mateusz,

has the issue been fixed yet?

Mateusz Łubianka staff commented 4 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 free commented 4 years ago

I've been having the exact problem. Precisely as described. Fixing the bug will be appreciated.

Grzegorz Bujański staff commented 4 years ago

Sorry about that. We're working to fix bugs in many of our components. Unfortunately, this one has not been fixed yet.

Add comment

Tenarius free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 4 years ago

Hi, yes. You can set imgSize options when you init paralax: https://mdbootstrap.com/docs/jquery/css/parallax/#options

Add comment