Hamburger menu not working on Ipad with IOS 9

[Longkt]

Im using OnePress theme and having an issue with the hamburger menu on devices with IOS 9 (an Ipad). The menu doesn't dropdown when clicking on it, it just opens the URL /#0. I checked on other devices with IOS 10 or 11 and it works fine on them.

[bwaack]

Yes, thats weired. It seems that page does not complete loading. (background-pictures doesnt show up in hero and videolightbox). endless loading-icon in hero-section.
I found an old installation of ver2.0.9. That works fine with Ios9.
Dont know, which later version brought this issue.
Greetz
b.

[bwaack]

ver. 2.2.0 is the last one, where everything is showing up on IOS9.
But there are some positioning issues with the Hamburger Menue - similar like in all versions before...

[bwaack]

The issue seems to be relateted to assets/js/theme.js
there had been bigger changes to mobile menue and on ios 9.3.6 site does not load complete anymore since ver.2.2.1

If you throw theme.js from ver 2.2.0 in assets/js/ from version2.2.4 page loads on IOS9.3.6. and positioning of menue is nearly perfect.

got no apple to do a safari investigation what is stopping the loading on older apple mobiles.
There have been lots of cosmetical changes in theme.js which makes it difficult to compare versions.
I give up.

anyone?

[bwaack]

well, I couldnt live with that.
theme.js crashes in IOS 9.3.6. because of the fancy trick starting in line 134:

(function() {
	if (isMobile.any()) {
		/**
		 * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
		 */
		// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
		let vh = window.innerHeight * 0.01;
		let vw = window.innerWidth * 0.01;
		// Then we set the value in the --vh, --vw custom property to the root of the document
		document.documentElement.style.setProperty("--vh", vh + "px");
		document.documentElement.style.setProperty("--vw", vw + "px");
		window.addEventListener("resize", function() {
			let vh = window.innerHeight * 0.01;
			let vw = window.innerWidth * 0.01;
			document.documentElement.style.setProperty("--vh", vh + "px");
			document.documentElement.style.setProperty("--vw", vw + "px");
		});
	}
})();

Seems to be the use of "let" in those function-lines which causes the crash.
I did a dirty hack and replaced those lines with:

var vh = window.innerHeight * 0.01;
var vw = window.innerWidth * 0.01;

 (function() {
	if (isMobile.any()) {
		/**
		 * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
		 */
		// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
	
		// Then we set the value in the --vh, --vw custom property to the root of the document
		document.documentElement.style.setProperty("--vh", vh + "px");
	        document.documentElement.style.setProperty("--vw", vw + "px");
		window.addEventListener("resize", function() {
		vh = window.innerHeight * 0.01;
		vw = window.innerWidth * 0.01;
			document.documentElement.style.setProperty("--vh", vh + "px");
			document.documentElement.style.setProperty("--vw", vw + "px");
		});
	}
 })();

After that the page shows up complete again, and the eventlistener seems to work fine.
There are still some positioning issues with the menue in Ios 9.3.6 but those had been there in all versions I tried. I will try to fix those with some custom css.

Greetz
B.