iOS Safari keyboard appearence does not trigger window.resize event

Question

I have a layout that needs to respond to a keyboard appearnce.

• Android (Version 6+) - when a keyboard appear - window.resize triggers.
• iOS (Version 10+) - window.resize does not triggers.

I have prepared a small Demo that shows how inner height respond to the keyboard appearance. You can tap the input to bring up the keyboard.

// select the paragraph element
const innerHeightParagraph = document.getElementById("inner-height")

// set the innerHeight for the first time.
innerHeightParagraph.innerText = window.innerHeight

// register resize event.
window.addEventListener('resize', function() {
  innerHeightParagraph.innerText= window.innerHeight
})

p {
  font-size:60px; margin:0px;


}

<h1>Current InnerHeight</h1>
<p id="inner-height"></p>
<input></input>

What is a suggested workaround for iOS?

Answer 1

window.visualViewport.addEventListener can be used and it is triggered whenever a keyboard is shown/hidden

  if (window.visualViewport) {
    window.visualViewport.addEventListener("resize", () => {
      console.log("visualViewport RESIZE IS TRIGGERED");
    });
  }