CODEWITHSUNDEEP
javascriptreactjsswipe
Benjamin Smith Max
Benjamin Smith Max

Reputation: 2748

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

        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.

Upvotes: 23

Views: 1807

Answers (2)

Craig Poole
Craig Poole

Reputation: 750

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/

Upvotes: 1

Nereo Costacurta
Nereo Costacurta

Reputation: 8541

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.

Upvotes: 0

Related Questions