Swipe smoothness differ between divs

Question

I am using react-swipeable-views in my project to enable touch swipe events. I can swipe between different div, which are inside <SwipeableViews/>. I have three different divs, out of which, in the 1st div, I have list of images. In the other two remaining divs, there's nothing.

export default class Photos extends React.Component {
    render() {
        const styles = {
          slide: {
            padding: '15px',
            minHeight: '500px',
            color: '#fff',
          },
          slide1: {
            background: '#FEA900',
            overflowY: 'hidden'
          },
          slide2: {
            background: '#B3DC4A',
          },
          slide3: {
            background: '#6AC0FF',
          }
        }

        return(
            <div id="profile_photos">

               <div id="profile_photos_nav">
                   <span class="photo_nav" id="photo_timeline">
                       <button class="active_btn">Timeline Photos</button>
                    </span>
                   <span class="photo_nav" id="photo_profile">
                       <button>Profile Photos</button>
                   </span>
                   <span class="clear_both"></span>
               </div>

               <SwipeableViews>
                    <div style={Object.assign({}, styles.slide, styles.slide1)}>
                        <img src="img/img3.jpg"/>
                        <img src="img/img5.jpg"/>
                        <img src="img/img6.jpg"/>
                        <img src="img/img7.jpg"/>
                    </div>
                    <div style={Object.assign({}, styles.slide, styles.slide2)}>
                        slide n°2
                    </div>
                    <div style={Object.assign({}, styles.slide, styles.slide3)}>
                      slide n°3
                    </div>
                </SwipeableViews>

            </div>
        );
    }
}

However, swiping between slide2 and slide3 is very smooth. But when swiping between slide1 and slide2, its a bit jerky and not smooth. And when I check in the chrome console, I am getting this error:

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

:3000/#/profile/photos?_k=4qkf5g:1

If I remove the images form the 1st div, its working very smoothly again. What can I do to smooth out the swiping (while having the images in the 1st div) between 1st div and 2nd div? Please help me.

Amphetamine

Try to load images of slide1 using timer once the swiping complete – Crossfertilization

One thing you could think about looking into is react-canvas. Flipboard has done some great stuff with this exact thing on mobile sites using canvas to make it feel very smooth. – Hoban

Hi, I've thrown together a WebpackBin demo with your code, please check it out. It all looks silk-smooth on my (quad-core) laptop. – Agrobiology

Can you provide jsfiddle and codepan link? to see what actualy does. – Stowell

Answer 1

Might be worth trying the css property 'will-change' to tell the browser that the elements are likely to move.

https://css-tricks.com/almanac/properties/w/will-change/

Xuthus

Answer 2

If it has something to do with the rendering engine, you could trigger the GPU, which is faster than CPU, applying some sort of css transformation (e.g. rotate(0.00001deg)) before the slide start sliding, and then remove the transformation at swipe done.

By the way, I don't know if this will raise a lot your slider performance, but it's worth trying.

Aplite