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.

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/