I'm having the same problem as well, with web-bit browers, for sure. It seems to be an overflow issue, I am betting the map itself (I think we only see a small portion of it, more is hidden) and/or the directions.
I have solved the overflow to the right (I THINK), at least with 2 browsers on mobile android platform, by using overflow-x: hidden in the body CSS. However, I still get the Y overflow, which on a touch-screen device is actually a pretty big issue,,, 1 swipe on the map UP (expected behavior, since the map is moved by touch swiping), and the page is off like a rocket to the moon, or at least the ISS.
I have tried putting overflow: hidden is EVERY div, individually (instead of in the body) and it doesn't work. FYI, if you put overflow: hidden in the body, you won't get the scrolling in either direction, but you also can't scroll to see the directions.
Any ideas? Somewhere else to look? JS, CSS? I am what I consider an advanced amateur at this stuff, but I am totally stumped on this one.
Oh, one last thought, that I know isn't the cause of my experience/problem, but I did figure out a way to get the height of the map to fill the height of the screen, device dependant. My goal is to get the map to open on the page (mobile phones), <i>just</i> about full screen. By using JS, getting the screen height variable, passing that to the URL, and then getting the variable using PHP, I can "echo" the value of the variable in the HTML for the height, i.e. ($height-0)px. I added the -0 so I can tweak the height - or + if need be,, in fact I am, allowing for a div up top that has the page menu in it. here's the page if you want to try (themidwaybb.com/wp-content/map_mobile3.php), at a few different window heights,, oh the width is set in % of course, so that is responsive as well.
All the best,