KWeiss KWeiss - 2 years ago 98
CSS Question

Side-Scrolling images rendering slowly

In my React app:

I have a side scrolling slider of React components that contain images. The user can scroll to the left and right using the standard

overflow: scroll
CSS mechanism.

When the viewport is narrow and the user scrolls fast, the elements sliding into view are invisible for a noticeable amount of time before they render. I have tried to prevent the React side of things from re-rendering anything, and it seems that the components do not re-render. This has not solved the problem.

My code is somewhat like this:

CSS

.sliderContainer {
overflow: hidden
}

.slider {
display: flex;
height: 400px;
overflow-x: scroll;
}


HTML rendered by the React component:

<div class="sliderContainer">
<div class="slider">
// this contains many (20+) components similar to this:
<div class="contentComponent">
<img class="contentImage" />
<img class="authorImage" />
<p>some text</p>
</div>
</div>
</div>


So my question is this:

Does fast side-scrolling always cause the scrolling items to render slowly? If not, what could cause this effect, and how can I prevent it?

Answer Source

I have found the solution in this question: Can I do anything about "repaints on scroll" warning in Chrome for "overflow:scroll" div

I needed to search for "repaint" rather than "re-render".

The solution to allow more fluid scrolling, is to give the .slider div the following css property:

transform: translateZ(0);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download