Button not clickable over iframe on mobile web

Question

I am attempting to place a button absolutely over an iframe. When viewing my app in mobile web, however, no button click is registered; iInstead, a click is registered on the iframe that's underneath it.

The exact same implementation works on non-mobile web.

Here is the code I am currently using:

<div style={{ width: '100vw', height: '100vh', display: 'flex', position: 'relative' }} />
   <button
      style={{ position: 'absolute', top: 0, bottom: 0, zIndex: 1  }}
      onClick={() => console.log('button clicked')}
   >
      click here
   </button>

   <iframe style={{ width: '100%' }} src={src} />
</div>

A few other things I have tried:

• Setting the z-index of the iframe to a lower number (iframe still gets clicked)
• Disabling pointer-events on the iframe (the button click is still not registered)
• Wrapping the button in a div
• Wrapping the iframe in a div
• Stopping propagation of the click event of the button