caseycesari
commented
5 years ago As @alexelash pointed out, this is a result of iOS safari accounting for the browser chrome when calculating the height of the webpage content.
As suggested by @lederer, It turns out that vh/vw units along with using position: absolute on the root element can cause some of these issues. We are employing both of those techniques.
I tried various modifications of the existing style rules, mostly converting vh/vw to 100%/100%, as well as removing position: absolute on some elements and adding it on others. I was never able to achieve the desired results (a fullscreen map without scrolling on iPad). In most cases, the map would render without any height and therefore be missing, or it would be rendered slightly smaller than full height/width, which left blank space in the viewport.
This branch is in a state where the map is slightly smaller than the space it is given, which eliminates the over-scrolling, but leaves blank space.
Will need designer assistance on this.
lederer
Depending on the device, the map height appears to be different. This results in the map attribution, MapBox logo, and map compass being mispositioned, as well as sometimes being obscured.
Try to get a consistent map size, or at least adjust the styling of the above mentioned elements so they are displayed consistently across devices.