This is my first post on a wp-forum, and I’m quite a newbie when it comes to css editing.

I’m trying to customize the twentytwenty theme and recently made the header follow on scroll. But when I scroll down and toggle/untoggle the dropdown ‘menu’ icon (upper right corner), the whole page seems to ‘glitch’ as the other header elements (header image and search tab) disappear and reappear very staccato-ish. This is particularly explicit in the Safari browser (less so in Chrome and IE). There are no problems when I toggle/untoggle the menu at the top of the page – nice, smooth transition.

Can anyone here guide me to a way to make the toggling/untoggling of the dropdown menu a smooth experience anywhere on the page, preferably without hiding the other header elements?

Any help would be greatly appreciated!

Kind regards,

Simon

If so, there is a fix. This patch works: https://core.trac.www.ads-software.com/attachment/ticket/48601/load-touch-detection-when-dom-is-ready.diff

I wonder how come the dropdown menu opens and closes smoothly from the top of the homepage while keeping the header image and search button visible – but produces sudden loading ‘jumps’ or ‘glitches’ when the same operation is carried out further down the page. I guess it is because the header image and search button is forced to be made invisible/moved outside of the screen – so perhaps it is a styling issue?

I just can’t find out how to fix the problem… So any help would still be deeply appreciated!

Thanks for your support and help and this best theme ever ?? Have a great week!!!
Kind regards from Cologne

How I “fixed” this (maybe not really a fix, but an adaptation due to these particular needs):

in index.js file:
– make htmlStyles function return false (this will prevent inline style change for html element when clicking to show the modal menu):

function htmlStyles() {
			var overflow = _win.innerHeight > _doc.documentElement.getBoundingClientRect().height;
			// return {
			// 	'overflow-y': overflow ? 'hidden' : 'scroll',
			// 	position: 'fixed',
			// 	width: '100%',
			// 	top: getAdminBarHeight(true) + 'px',
			// 	left: 0
			// };
			// FIX: STOP CHANGING HTML STYLE
			return false;
		}

– comment / remove ‘_win.scrollTo(0, Math.abs(_win.twentytwenty.scrolled + getAdminBarHeight()));’ in line 246 (this will prevent the browser to scroll to the top when clicking to hide the modal menu):

// _win.scrollTo(0, Math.abs(_win.twentytwenty.scrolled + getAdminBarHeight()));

Still need some more testing but seems to be working.

The fix was included in that, released last week, but you may need to clear your browser’s cache: https://www.refreshyourcache.com

Any suggestion?

It seems an automatic scroll is applied to the html element, can we disable it? In Safari the scroll seems instant, hence the “glitch”; in chrome there is a delay and a slower scroll, but the principle is the same: when one clicks the menu, the modal menu opens, and then, when one clicks out (or presses escape key) the modal closes, the page scrolls to the top, and then back to where we were when we opened the modal menu in the first place.