question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug on resize after having reached the bottom of the page

See original GitHub issue

Hi there,

I’ve noticed a small bug if you resize the window after having reached the bottom of the page. The transform value seems to exceed the new instance limit. It’s getting back to a normal behavior after scrolling again.

To reproduce the bug, simply scroll to the bottom of the page and then resize the window: https://locomotivemtl.github.io/locomotive-scroll/

Tested on latests Chrome (v78) and Firefox (v70) on Windows.

I’ve fixed this issue by updating the updateScroll method so that the the instance delta y property can’t exceed the instance limit and by then calling transform to reset the position in case it happens, however I’ve not dug deeply enough in the code to be sure it’s not just a dirty hack:

      key: "updateScroll",
      value: function updateScroll(e) {
        if (this.isScrolling || this.isDraggingScrollbar) {
          this.instance.scroll.y = lerp(this.instance.scroll.y, this.instance.delta.y, this.inertia * this.inertiaRatio);
        } else {
          // fix to avoid the limit to be exceeded on resize
          if(this.instance.delta.y > this.instance.limit) {
            this.instance.delta.y = this.instance.limit;
            // force transform to the max position (dirty hack?!)
            this.transform(this.el, this.instance.scroll.x, -this.instance.delta.y, 0);
          }
          this.instance.scroll.y = this.instance.delta.y;
        }
      }

(Edit: I was using v3.1.5, things may have changed by then)

Thank you very much folks for the awesome work!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:5

github_iconTop GitHub Comments

2reactions
Eren115commented, Jun 24, 2021

Guys if anyone can’t understand what they written over above… And if you are using react or gatsby just like me, then doing

overflow: hidden; to the body will fix the issue of this.

It work nice for me, hope this will help you guys also…

2reactions
jmartinezukcommented, Oct 30, 2019

Can confirm to this issue, when resizing, the scroll content goes out of view until you scroll manually, then it returns to normal.

Edit: tried the hack above, but it didn’t work for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why wont my divs resize properly until the page is refreshed ...
As you can see, the layout loads fine, but upon any kind of resizing of the browser window, the layout breaks until the...
Read more >
How to Resolve a Fluid Header/Footer Problem When the ...
The problem happens under the following circumstances: (1) The header and footer of the page have no specified width; (2) The content area...
Read more >
Window's resize event fires when element goes full screen
The underlying problem is that when an element on a page is sent to full screen, the window containing the element receives a...
Read more >
Not able to resize table when page is in full width - Jira
It used to be fine, now it isn't. It's a bug, so call it a bug (that came with the 'up'grade). That way...
Read more >
Resizing or Scaling -- IM v6 Examples - ImageMagick
The resize operator can also be applied to images immediately after being read, ... -geometry " is also saved until the end of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found