Menu glitch when toggled/untoggled (twentytwenty)

This may be related to https://core.trac.www.ads-software.com/ticket/48601

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

Thank you for your quick response, James. I’ve inserted the patch in index.js file now, but there seems to be no improvement.

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!

Dear James,
thank you, this patch solved my issues, too. Is there a date on when it will wander into the new theme-version with an update?

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

• This reply was modified 4 years, 11 months ago by treebranch.

It should launch alongside WordPress 5.3.1, which officially will be released “when it’s ready.”

I think the fix has nothing to do with @oldteaseller issue, since I have the same issue (I fixed the header at the top of the browser window and I am experiencing the same glitched behavior – on Safari, since Firefox and Chrome seem to work fine. I think it had to to with the index.js changing the html element’s CSS attribute inline.

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.

Are you running Twenty Twenty 1.1?

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

Thanks for reminding me that. I was using an older version. I did try replacing index.js with the latest version available on TRAC today but did not work, but updated the theme as a whole and it seems to have been fixed!

i am experiencing the same issue with the latest version of TwentyTwenty (currently the 1.2).
With the @bmscmoreira “fix” everything works as expected.

Any suggestion?

Just to keep this alive: I think it is still not “fixed” in version 1.4 of the theme. I have also the same issue: when fixing the header (position:fixed, top:0) there is a glitch noticeable in safari, particularly: it seems the page scrolls to the top and immediately scrolls back to where it was, causing the glitch. This does no happen (obviously) when the page is already at the top.

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.

• This reply was modified 4 years, 4 months ago by bmscmoreira.

It was definitely fixed in Twenty Twenty 1.1 6 months ago, you confirmed as much above 5 months ago: https://www.ads-software.com/support/topic/menu-glitch-when-toggled-untoggled-twentytwenty/#post-12259775

If you have modified the theme, and it’s not working with your modifications, that would be an entirely separate issue, so I recommend opening a new thread: https://www.ads-software.com/support/theme/twentytwenty/#new-topic-0

Thanks for the notice James, indeed the “glitch” was due to my modification fixing the header to the top with the CSS:

#site-header {
position:fixed;
top:0;
}

This causes the glitch in safari and the scroll effect in chrome, where the page would jump to the top and scroll down to the original position.

In case someone else wants the same fixed header without the glitch, I could “fix” this issue in current version of the theme (1.4) by commenting the following lines in index.js file inside twentytwenty theme folder:

'overflow-y': overflow ? 'hidden' : 'scroll',
position: 'fixed',
width: '100%',
top: getAdminBarHeight(true) + 'px',
left: 0

and

_win.twentytwenty.scrolled = parseInt(styles.top, 10);

Thanks!