Lags on scrolling member page. ipad mini 4. Safari browser

Home Forums Gwangi – Dating & Matchmaking Community Theme Theme Customizer Search Results Lags on scrolling member page. ipad mini 4. Safari browser

This topic contains 6 replies, has 2 voices, and was last updated by  themosaurus 1 month, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #3010

    Maks Rusakovič
    Participant
    • 78 Posts
    @wegosi

    Hello @themosaurus

    Please, check scrolling of members page on Ipad. Safari. All other apps are closed.
    The same problem with chrome on Ipad.

    It’s a very laggy now.

    #3015

    Maks Rusakovič
    Participant
    • 78 Posts
    @wegosi

    there is the video record

    I don’t know while streamable link isn’t showed.

    #3017

    themosaurus
    Keymaster
    • 1225 Posts
    @themosaurus

    Hi @wegosi,

    Is this the link to your video: https://streamable.com/29q9o ?

    Some links shown on our support forums -like streamable URLs, for instance- need code markups to be properly displayed as they are interpreted by WordPress as embeddable content, like Youtube and Vimeo videos. However, we need to investigate to understand why Streamable video are not displayed as videos.

    Regarding the lag when scrolling, we will investigate and look for the source of this issue. We will be back to you ASAP.

    Regards,

    #3018

    Maks Rusakovič
    Participant
    • 78 Posts
    @wegosi

    @themosaurus

    Yes, I just want to show displaying lags even in Live demo view.
    Maybe it’s my local problem, maybe not.

    Thank you.

    #3026

    themosaurus
    Keymaster
    • 1225 Posts
    @themosaurus

    Hi @wegosi,

    Here are a CSS snippet which can reduce the scrolling issues on mobile devices:

    @media screen and (max-width: 992px) {
    	#members-list .element-animated {
    		transform: translate3d(0,0,0) !important;
    		animation: none !important;
    		transition: none !important;
    	}
    
    	#members-list .card {
    		transform: translate3d(0,0,0) !important;
    		box-shadow: none !important;
    		animation: none !important;
    		transition: none !important;
    	}
    
    	#members-list .card .card-body:before {
    		transform: rotate(-6deg) translate3d(0, 34px, 0) scale(1.2) !important;
    	}
    
    	#members-list .card .card-body:after {
    		transform: rotate(-6deg) translate3d(0, 34px, 0) scale(1.2) !important;
    	}
    
    	#members-list .card .avatar {
    		opacity: 1 !important;
    	}
    }

    To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
    Pasting your code snippet there should do the trick for you.

    We hope this will solve your issue. 🙂

    All the best,

    #3029

    Maks Rusakovič
    Participant
    • 78 Posts
    @wegosi

    Hello, @themosaurus

    Thank you. But it doesn’t work.
    Images of the users appear/disappear during scrolling.
    Could you, please, check it?

    #3058

    themosaurus
    Keymaster
    • 1225 Posts
    @themosaurus

    Hi @wegosi,

    The above snippet only reduce the scrolling issues on mobile devices (remove effect on hover).

    But for the “appear/disappear” image this seems to come from the browser that displays/hides the images to speed up the scroll and the elements rendering.
    We see that this affects all the images (even the one in the pink section before the footer) and we don’t know how to do anything about it.

    We can try with an extended snippet to force rendering acceleration but without guarantees :

    @media screen and (max-width: 992px) {
            #members-list,
    	#members-list .element-animated {
    		transform: translate3d(0,0,0) !important;
    		animation: none !important;
    		transition: none !important;
    	}
    
    	#members-list .card {
    		transform: translate3d(0,0,0) !important;
    		box-shadow: none !important;
    		animation: none !important;
    		transition: none !important;
    	}
    
    	#members-list .card .card-body:before {
    		transform: rotate(-6deg) translate3d(0, 34px, 0) scale(1.2) !important;
    	}
    
    	#members-list .card .card-body:after {
    		transform: rotate(-6deg) translate3d(0, 34px, 0) scale(1.2) !important;
    	}
    
    	#members-list .card .avatar {
    		opacity: 1 !important;
    		transform: translate3d(0,0,0) !important;
    		animation: none !important;
    		transition: none !important;
    	}
    }

    Regards,

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.