Steakhouse Problem with resize on mobile devices

Hi there,
I have used your theme to 2-3 sites and they all have the same problem.
When a user visits the site by mobile phone, the mobile browser shows the address bar at the top, but when you scroll at the site the browser's tab disappears. This causes a problem, as somehow the steakhouse theme updates the user's screen dimension and changes the css sizes. Whenever the address bar hides or appears. So when someone scrolls from the top to somewhere else at the same page, some things change, and when he gets back at the top, the mobile internet broswer address bar appears again, causing the theme to resize its elements again.
Is it a way so that the height is checked only when the page loads, and not after loading has completed? What solution do you suggest to my problem?

I couldn't upload the video, its size is just 3.7MB.
i uploaded it on youtube.
https://youtu.be/tyfMbjtTJyc

Hi,

It's a default mobile browser behavior, the address bar is only visible when you are scrolling page to the top.

Yes but it only resizes the size of steakhouse. if i try other sites, they dont change when the bar shows up or not.

I can't see the issue on my mobile devices with android and iOS, which browser and device exactly are you using?

It happens on Android using Default Internet Browser App, Chrome Browser App and Firefox Browser App.
It doesn't happen in iOS when I test the Safari app though.

It is crucial for me to find a fix to this problem.

I've checked Chrome and default Android browser and still can't see the problem. Which version of Android are you using?