Chrome update compromising the viability of virtual scroll

[fcisio]

Hello 👋
After my latest Google Chrome update, I've started noticing a really bad new feature.

Describe the bug
From what I understand, content that is translated outside of the viewport is unmounted by the browser. Only for it the be rendered again once the content gets in the viewport.

For virtual-scroll, this means that the whole content of a page is constantly unmounted and rerendered. In theory, it shouldn't be too bad, but the rerendering is pretty noticeable. What's even more worrying is that content sometimes fails to be rerendered simply by entering the viewport. Meaning that whole pieces of UI can randomly go missing (until something is interacted with and forces the browser to rerender its view).

To Reproduce
Steps to reproduce the behavior:

1. Go to https://locomotive.ca/en
2. Scroll down a bit
3. Scroll back up (the quicker the more obvious it is)

Expected behavior
The content should not be unmounted when out of the viewport.

I'm aware this is not related to locomotive-scroll, but it impacts it nonetheless.
I feel like we should report this issue to chrome or the viability of all virtual scroll library can be compromised.

Report issue:

1. chrome://settings/help
2. Report an issue

Desktop (please complete the following information):

• OS: Big Sur
• Browser: Chrome
• Version: v94.0.4606.81

Thank you 👊

[axellelarios]

Hello fcisio
Same problem here. I reported the problem to google also.

I'm using locomotive scroll on wordpress using oh boiii steroids plugin and since saturday it's a mess.
When scrolling up, some UI elements disapear, or take longer to load. When I resize or click these appears again.

I think for now I will have to delete it completly :(

When I look at others website made with locomotive scroll, seems like everything works fine :/

[vitass]

Noticed the same a couple of days back - a temp fix would be to put a position: fixed on the wrapper. In case of the https://locomotive.ca/en would be to do it on [data-load-container].

[fcisio]

Noticed the same a couple of days back - a temp fix would be to put a position: fixed on the wrapper. In case of the https://locomotive.ca/en would be to do it on [data-load-container].

Cool workaround @vitass ! Not sure I understand how it works tho.
Could you elaborate on why it works?

[Dushyant1295]

Same Here, all my websites built with locomotive scroll complaining after Chrome update

html.has-scroll-smooth {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;  
}

By adding position:fixed works fine for now, but I'm not sure if it's a perfect way to resolve this issue

[abdulrauf11]

Noticed the same a couple of days back - a temp fix would be to put a position: fixed on the wrapper. In case of the https://locomotive.ca/en would be to do it on [data-load-container].

@vitass Man, you are a life saver! 🙏

[xavierfoucrier]

I am working on a client site built with locomotive then recently discovered this sad issue... and reported to Google already.
Thanks for the fix anyway I will try and investigate if there is a better one, but it would be preferable that Chrome team improve this new "feature".

Still an issue in Chrome Canary v97 at this time of writing.

[friconelli]

same problem, solved with
html.has-scroll-smooth { backface-visibility: hidden; transform: translateZ(0); }

[gfnool]

I found that Chrome is repainting lots of elements during the scroll, maybe the problem is related to that.
The html "position: fixed" helps to keep the elements in view but unfortunately the repaint is still there.

[Dushyant1295]

@gfnool @friconelli

it seems like this issue is related to Paint Complexity

by adding
transform: translateZ(0);

will force the browser to use hardware acceleration for paint and also works fine

[xavierfoucrier]

@Dushyant1295 Looks like for Chrome it's not enough for repainting.
Using only transform: translateZ(0); doesn't seem to work, I guess you probably have additional styles on the element.

This fixed the issue on my side:

.has-scroll-smooth {
  position: fixed;
  inset: 0;
}

[Azolia-Design]

@Dushyant1295 Looks like for Chrome it's not enough for repainting. Using only transform: translateZ(0); doesn't seem to work, I guess you probably have additional styles on the element.

This fixed the issue on my side:

.has-scroll-smooth {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

This one work perfectly for me!

[itisyb]

@Dushyant1295 Looks like for Chrome it's not enough for repainting. Using only transform: translateZ(0); doesn't seem to work, I guess you probably have additional styles on the element.

This fixed the issue on my side:

.has-scroll-smooth {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Why I am the only one :(
this is not working for me I am not able to scroll after adding fixed position

[elliottmangham]

I noticed that there was no screen recording of the issue, so here is an example of the problem, for clarity:
https://www.loom.com/share/76500d232aa64ea1ae98601663968677

Note in my case, adding the following fixes the issue whilst Google hopefully works on a solution:

html.has-scroll-smooth {
	backface-visibility: hidden;
	transform: translateZ(0);
}

[data-load-container] {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
}

[Artem-Semenov]

Is there any new solutions? I am facing the same in Chrome

[xavierfoucrier]

@Artem-Semenov see #353 (comment).

As stated / explained on the main readme:
"Scroll-hijacking is a controversial practice that can cause usability, accessibility, and performance issues."

[OussamaKhoubran]

In case someone still have an issue, you can do the trick by resizing the window

window.addEventListener('load', function () {
     var resizeEvent = new Event('resize');
     window.dispatchEvent(resizeEvent);
});