[Resolved] Scrolling on page by touching embedded youtube video, disable menu click

[onalti]

For mobile format, whenever scrolling on page by touching embedded youtube video, both of menu and other clicks get out of order and become disabled

No errors appear in the Chrome Developer panel.

All add-ons have been disabled and tried again

it happens on all sites that I use Generate Press.

Problem is tested on Device ios 12.3.1.

No such problem was observed for Android.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[onalti]

I’ve included the address of the website that issues. thank you.

[Leo]

Don’t think I’m seeing the problem on an iPhone running 12.4.1 with Chrome.

So I load the home page, scroll down to the video below title “High quality FUE Hair Transplants”, play the video, close the video, then click on the menu and it still works.

Am I missing something here?

Let me know 🙂

[onalti]

Touch Screen

play embedded video. Drag the page up and down by touching the video area. I’ve seen the problem on sites that use all generatepres.

[Leo]

I just tested again following the same step showing in the video you sent in but didn’t experience any issues at all.

Can you test using the latest iOS version 12.4.1 and make sure all browser extension is disabled?

Which browser are you using?

[David]

Hi there,

you have a myscript.js in your child theme. Can you disable this, i believe this:

// 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;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', <code>${vh}px</code>);

window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', <code>${vh}px</code>);
});

Its affecting the DOM layout and could be causing the problem. If i remove the –vh variable it is adding to the root HTML document then the problem stops

[onalti]

ios 12.4 Tested with another device that uses .plug-ins have been disabled.negative result.

All websites that use generatepress have the same problem.

[Leo]

Have you tested David’s suggestion?

[onalti]

I tested David’s suggestion, the result hasn’t changed. i have updated to the latest version of ios 12.4.1. The result has not changed again.

[Tom]

I believe this is a conflict with the cookie modal. Can you try adding this CSS?:

#cookie-law-info-again,
##cookie-law-info-bar {
    z-index: 10 !important;
}

[onalti]

I added but it doesn’t work. Is there an example website that does not have this problem 🙁

[David]

When i tested your site on my iPhone Dev Tools, removing the Cookie Law Info markup resolved the issue. Can you try disabling the Cookie Law Info, leave it disabled and then let us test.

We have no other experience of this issue, but it is quite common that modal elements block other elements.

[onalti]

I ve disabled Cookie Law Information. The problem continues. I’ve seen this problem on all sites that I use generatepress. 🙁

[Tom]

On all of the sites you’re using, I assume you’re using the sticky navigation? I believe this is an issue with embedded YouTube videos and fixed elements (not specific to GP itself).

https://stackoverflow.com/questions/25687323/links-arent-clickable-when-theyre-placed-over-playing-youtube-video-embed-on
https://stackoverflow.com/questions/9074365/youtube-video-embedded-via-iframe-ignoring-z-index

Instead of using the Embed Block in Gutenberg, can you try manually embedding the iframe into an HTML block?

[Author]

Posts