How do I make the blank areas not scrollable for iOS without hurting the game?

Question

I'm trying to improve my phaser game experience by enabling body-scroll-lock.

Currently, the code from the official example renders like this

where the areas pointed out by the red rectangles are scrollable, which is not good as the player might accidentally touch that area during the game.

I tried to change the config

scale: {
    mode: Phaser.Scale.FIT,
    parent: 'phaser-example',
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: window.innerWidth,
    height: window.innerHeight,
},

and I got

where the area pointed out by the red arrow is not scrollable though the game is now a mess.

I also tried the approach in another tutorial.

  <style>
    html,
    body {
      overflow: hidden;
    }
  </style>

  <script>
    document.body.ontouchend = (e) => {
      e.preventDefault();
    };
  </script>

none of them works.

this make things worse

body {
 position: fixed; 
}

How do I make the area not scrollable without hurting the game?