scrolling down leads to unintentional jumps on mobile chrome

[jasan-s]

tested only on chrome mobile on Android device(Pixel 2).

steps to reproduce:

visit https://stephane-monnot.github.io/react-vertical-timeline/#/demo on a mobile chrome browser.

scroll down the timeline. You will notice the content jumps.

update: the issue only exists for media query break-points 1024px and smaller when using chrome devtools

[jasan-s]

the following change(commenting out a class) solved the issue:

@media only screen and (max-width: 1169px) {
  /* .vertical-timeline--animate */
.vertical-timeline-element-content.bounce-in {
    visibility: visible;
    -webkit-animation: cd-bounce-2-inverse 0.6s;
    -moz-animation: cd-bounce-2-inverse 0.6s;
    animation: cd-bounce-2-inverse 0.6s;
  }
}

[stephane-monnot]

Thank you, I will check and fix it when I have time.

[lakshay17244]

@jasan-s Thanks for the input. I had the same issue and commenting out that class worked for me.

[sebge-1]

Thanks @jasan-s - I commented out the animate class and got rid of the janky scroll up effect too.

[flicksolutions]

This did not work for me. I did however get the component from npm. Does this matter? @stephane-monnot Thank you for this wonderful component! I would be happy if you could fix this small bug. The component would be even better after the fix. :)

[SergeShkurko]

Simple smooth animation (slide) for mobile devices with out screen resize

@media only screen and (max-width: 1169px) {
  .vertical-timeline--animate  .vertical-timeline-element-content.bounce-in {
    visibility: visible;
    animation: timeline-slide 0.6s;
  }
}

@keyframes timeline-slide {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }

  60% {
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

[stephane-monnot]

Good job. I will use it ;) .Thanks

[PKWebAppDev]

I can confirm that this still happens with mobile chrome views even after commenting out the animate class.

@flicksolutions

Did you ever find a solution?

[stephane-monnot]

You can add to fix it :

html, body {
  overflow-x:hidden 
} 

[PKWebAppDev]

reinstalled the npm package, and commenting the animate class works now.

Thank you everyone and Stephane!