I'm working on a web-app using
ReactJS (using JS and material UI) that is intend to work on mobile screens. I'm facing a problem while opening it in iPhone's (iPhone 12, iPhone 13) chrome browser.
There's a grey bar at the bottom that is causing the issue. At the bottom of the screen I have "Button" that is being hidden behind grey area (see area pointed out by green arrow in screenshot).
Not just this screen, nearly all of my screens are rendered behind it, as result most of the functionalities are not working properly.
But this problem is not coming if I open it in laptop browser with mobile screen using developer tools.