HTML shifted up when bringing up the keyboard in iOS

Hi I'm developing an application with Angular and Angular Material. I am using flex for layout and alignment.

I am having an issue on mobile Safari, where by, when I click to type and the keyboard goes up, the html page get's shifted up and creates a gap as you can see in the pictures. This only happens with mobile Safari.

Input box without the keyboard

Input with the keyboard As you can see, the gray area is being shown the keyboard goes up. I was using the inspector tool, and the whole HTML page actually only wraps the input box. So that gray area is only added by iOS itself.

Has anyone encountered that? Any help would be appreciated! Thank You!