Scroll jumps when the page is updated (only chrome)

[drvnk]

The bug occurs when the screen size (viewport) is smaller than the section that will appear. When the page loads for the first time, everything is OK, but when you update it again, the scroll starts to jump in chrome.

Demo :
YT : https://www.youtube.com/watch?v=AuNNhVGY7z8&feature=youtu.be
Site : https://oziged.github.io/projects/reveal-bug/

• Operating System: Ubuntu 18.04
• Browser Version: Chrome
• ScrollReveal Version: Latest

[_]

My first hypothesis is that your JavaScript is being executed before the image has been downloaded, which means ScrollReveal is working with a 0 x 0 image since the image has no explicit dimensions (only max-width).

I recommend trying your code inside a load event handler to wait for the image to download before executing your code, which might look something like this:

<script>
  window.onload = function() {
    ScrollReveal().reveal('.container', {distance: '500px'})
  }
</script>

Please let me know if that improves things.

[drvnk]

Thank you for your response and your plugin.

Unfortunately, in my situation, it is not possible to wait for all the content to load via window.onload (I wait for images to load only on the first screen and then run ScrollReveal). When the images on the first screen are loaded, other images, that are below, still loading and scroll still jumps (:

In any case, thanks for trying to help, the bug in my situation is not critical, so everything is OK.

[_]

If possible, you can set the dimensions with CSS ahead of time to avoid the temporary 0 x 0 dimensions.

For example, you might try width: 500px; height: 500px instead of max-width: 500px to see if it changes things.