Scroll is jumpy on some pages

Hi,
Because of the header behavior on some pages, I find it difficult to follow when scrolling down. For example, on the Manage Sites page, when I scroll very slowly downward, the site “snaps” a large distance because the top menu bar (Manage Sites, Add New, Import Sites, Groups, Monitoring) suddenly disappears, causing everything to jump up more than the height of one of the rows below. I feel it would be a lot easier to follow the page if everything scrolled evenly without anything snapping away. Even more usable might be if the entire right hand pane, including the top area with the buttons (Sync Dashboard with Child Sites, Add New), would scroll up, leaving more area below (especially on smaller window sizes) for the site list.

Hi Libby,

thanks for reporting this problem.

Are you able to grab a screenshot so I can understand the problem better?

Sure. Here are two screen cap videos.

One is on the manage sites page and one is on the overview page. I hope they are helpful!

Hi Libby,

Strange, I can’t see this in my test setup.

Can you please post the community system report from your MainWP Dashboard for review? The report is located in your Dashboard under Status → Server, on the top right of the page.

Be sure to use the button like the one below; this button hides all your private information:

image

Pressing the button auto-copies the report to your clipboard then just paste it in a reply here.

I tested this in multiple browsers (Brave and Safari) with the same effect.

Here is the report:


### Server Info                    Required                                               Detected                                     Status   ###

MainWP Dashboard                   
MainWP Dashboard Version           4.1.10.1                                               4.1.10.1                                     Pass        
MainWP Upload Directory            Writable                                               Writable                                     Pass        
MainWP Extensions                  
No installed extensions            
WordPress                          
WordPress Version                  >=3.6                                                  5.8.1                                        Pass        
WordPress Memory Limit             >=64M                                                  256M                                         Pass        
MultiSite Disabled                 =true                                                  true                                         Pass        
FileSystem Method                  = direct                                               direct                                       Pass        
PHP                                
PHP Version                        >=7.0                                                  7.3.27-9+ubuntu18.04.1+deb.sury.org+1        Pass        
PHP Safe Mode Disabled             =true                                                  true                                         Pass        
PHP Max Execution Time             >=30 seconds                                           300                                          Pass        
PHP Max Input Time                 >=30 seconds                                           60                                           Pass        
PHP Memory Limit                   >=128M                                                 256M                                         Pass        
PCRE Backtracking Limit            >=10000                                                1000000                                      Pass        
PHP Upload Max Filesize            >=2M                                                   512M                                         Pass        
PHP Post Max Size                  >=2M                                                   512M                                         Pass        
SSL Extension Enabled              =true                                                  true                                         Pass        
SSL Warnings                       = empty                                                                                             Pass        
cURL Extension Enabled             =true                                                  true                                         Pass        
cURL Timeout                       >=300 seconds                                          60                                           Warning     
cURL Version                       >=7.18.1                                               7.58.0                                       Pass        
cURL SSL Version                   >=OpenSSL/1.1.0                                        OpenSSL/1.1.1                                Pass        
PHP Allow URL fopen                YES                                                    
PHP Exif Support                   YES ( V7.3.)                                           
PHP IPTC Support                   YES                                                    
PHP XML Support                    YES                                                    
PHP Disabled Functions             , pcntl_alarm, pcntl_async_signals, pcntl_exec, pcntl_fork, pcntl_get_last_error, pcntl_getpriority, pcntl_setpriority, pcntl_signal, pcntl_signal_dispatch, pcntl_signal_get_handler, pcntl_sigprocmask, pcntl_sigtimedwait, pcntl_sigwaitinfo, pcntl_strerror, pcntl_wait, pcntl_waitpid, pcntl_wexitstatus, pcntl_wifcontinued, pcntl_wifexited, pcntl_wifsignaled, pcntl_wifstopped, pcntl_wstopsig, pcntl_wtermsig,
PHP Loaded Extensions              Core, PDO, Phar, Reflection, SPL, SimpleXML, Zend OPcache, bcmath, calendar, cgi-fcgi, ctype, curl, date, dom, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, igbinary, imagick, imap, intl, json, libxml, mbstring, mysqli, mysqlnd, openssl, pcre, pdo_mysql, pdo_sqlite, posix, readline, recode, redis, session, shmop, soap, sockets, sodium, sqlite3, standard, sysvmsg, sysvsem, sysvshm, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, zlib
MySQL                              
MySQL Version                      >=5.0                                                  8.0.22-13                                    Pass        
MySQL Mode                         ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION      
MySQL Client Encoding              utf8                                                   
Server Info                        
Server Software                    nginx/1.16.1                                           
Operating System                   Linux                                                  
Architecture                       64		 bit                                               
Server Protocol                    HTTP/2.0                                               
HTTPS                              ON                                                     
Server self connect                Not expected HTTP response body:                       
User Agent                         Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15
Gateway Interface                  CGI/1.1                                                
Memory Usage                       5.35 MB                                                
Request Time                       1635449562                                             
Accept Content                     text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset Content             N/A                                                    
MainWP Settings                    
Number Of Child Sites              22                                                     
Use WP-Cron                        Yes                                                    
Optimize for Shared Hosting or Big NetworksNo                                                     
Automatic Daily Update             Install trusted updates                                
Abandoned Plugins/Themes Tolerance 365                                                    
Maximum number of posts to return                                                         
Maximum number of pages to return                                                         
Primary Backup System              Default MainWP Backups                                 
Maximum simultaneous requests      4                                                      
Minimum delay between requests     200                                                    
Maximum simultaneous requests per ip1                                                      
Minimum delay between requests to the same ip1000                                                   
Maximum simultaneous sync requests                                                        
Maximum simultaneous install and update requests                                                       
Active Plugins                     
GridPane Redis Object Cache        1.5.6                                                  Inactive                                     
MainWP Dashboard                   4.1.10.1                                               Active                                       
Nginx Helper                       2.2.2                                                  Active                                       
WP Mail SMTP                       3.1.0                                                  Active                                       

Hi Libby,

Report looks good.

After further investigation, I was able to find that this is actually a normal behavior for the ‘sticky’ elements in the framework we use. Sticky elements simply snap into the place when they get close.

If this annoys you, you can simply remove the sticky class from the header element by using this jQuery snippet in the JS section of the Custom Dashboard extension:

jQuery( document ).ready( function() {
	jQuery( '#mainwp-top-header' ).removeClass( 'sticky' );
} );

Perfect. I think that is much better. Out of curiosity, I wonder what goal is solved with that sticky class. It seems like it would help if something important were to be kept on the screen, but at this point it seems to simply eliminate a tiny amount of scrolling, at the cost of a distracting jump in the position of the relevant content. I’d suggest making the non-sticky behavior the default, unless I’m missing something.

Thanks for the solution!

Hi Libby,

The header element contains some useful features including the Sync Sites button. We wanted it available for user at any time and that is why we used the sticky class.

@libbynotzoey If you still want to keep the top bar fixed, in addition to the JS code suggested above, also add the following code in the Custom Dashboard extension, in the CSS section:

#mainwp-top-header {
    position: sticky;
    top: 0;
}

And optionally, to reduce the top distance of the submenu:

#mainwp-page-navigation-wrapper {
    padding-top: 0px;
}
1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.