Search code examples
iosreactjssafariprogressive-web-apps

ios PWA reduce innerheight after return back from external link

aftre return back from payment gateway in PWA app in ios, window.innerHeight will be decreased and there will be a free space at bottom page.

enter image description here

i tried to reload app but it didn't work. i need a solution to force safari to recalculate innerHeight or anything else. thanks for your help.

Solution

  • This problem occurs because of the automatic innerHeight change by the Safari browser. so that after opening the external link and returning to pwa, it decreases the height value. You can save the innerHeight value in local storage before opening the link. And after returning to your app, set the min height value of the body equal to the innerHeight stored in the local storage.

    The important thing when setting the height value for a body is that the values must be in pixels.

    // before open link
window.localStorage.setItem('bodyHeight, `${window.innerHeight}px`);

// after return to pwa app
document.getElementsByTagName('body')[0].style.minHeight = window.localStorage.getItem('bodyHeight');