Swipe smoothness differ between divs

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',

            <div id="profile_photos">

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

                    <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 style={Object.assign({}, styles.slide, styles.slide2)}>
                        slide n°2
                    <div style={Object.assign({}, styles.slide, styles.slide3)}>
                      slide n°3


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.


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.

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


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.

Read More:   Get div tag scroll position using JavaScript

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

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts