Survey123 geopoint not loading on mobile devices when embedded

[DataOfficer]

We have a webpage (www.arc-trust.org/garden-dragon-watch), within which we have embedded a survey123 form, built using Connect. The embedded form contains a geopoint question. This displays correctly when the webpage is accessed from a PC or laptop, but not when accessed from some mobile devices / via some mobile browers. When a user clicks on the geopoint question to add their location, the map screen goes black (though the address entry still seems accessible). If the form is opened as a standalone item in a web browser (https://arcg.is/1XieXr0) it performs as expected. Are there any known limitations of browser types supported / unsupported? 

I am using the following iframe html code:

<div class="embed-container" style="height: 1500px;"><iframe width="680" height="2200" name="survey123webform" frameborder="0" marginheight="0" marginwidth="0" title="Amphibians and reptiles in your garden" src="//survey123.arcgis.com/share/046b1389d4884f659e06baafba1119eb" allow="geolocation https://survey123.arcgis.com; camera https://survey123.arcgis.com"></iframe></div>

Screenshots of the issue

Accessing via the embedded form on our website from a mobile device:

Accessing via the direct link to the Survey123 webform on a mobile device:

As an example, on my own phone (Samsung Galaxy S5 Neo, Android) it does not work in the following browsers:

- Google Chrome version 81.0.4044.138 (address entry displays, but map is black)
- Samsung Internet version 11.2.1.3 (address entry displays, but map is black)
- Microsoft Edge version 45.03.2.4958 (address entry displays, but map is black)

Functions correctly in:
- Mozilla Firefox 68.8.1

The issue has also been reported by iPhone 6 users (presumably running Safari), but as it is a public survey, it has been difficult to get feedback and device / browser specifications when issues are occurring outside of internal testing.

Many thanks,
Rob

[JamesTedrick]

Hi Rob,

Apologies for the delay in response.  The form is working appropriately on my iOS (Safari) and Android Chrome (83.0.41003) devices.  If you are seeing the map being black, perhaps it has not loaded the imagery tiles?  That would be dependent on your bandwidth.

[EaganGIS]

We are also experiencing this issue.  It seems to have started recently (within the last week or so).  The survey is embedded in our website and the geopoint works fine on a PC/browser but not on a mobile device (both iOS and Android).  The survey outside of the embedded website works as expected on the mobile devices.  The map does show up, but once you click on it the map goes black.  So I don't think it is a bandwidth issue.

Here is the embedded survey:  https://cityofeagan.com/request 

Here is the survey on its own:  https://survey123.arcgis.com/share/f695dafe479f402a800d53440a64a0c8 

Any ideas?  Thanks James.

[DataOfficer]

Hi,
In our case it turned out to be that the custom CSS parameters added to the iFrame was making it so that the map display was bigger than the mobile could handle. Try changing your CSS/HTML to give a smaller frame size. This resolved the issue for us.

Rob

[TamiMaddio]

Thanks Rob.  We will give that a try.

[TamiMaddio]

Do you know what frame size worked for you?

[DataOfficer]

I think we used a height of 400 px in the end.

[MarkC1]

Tami, did you figure this out? I'm getting the same issue with google chrome on android, while a different issue with firefox on android. In firefox the map shows but the height is huge and you need to scroll down a long way to get to the button for adding features.

[maplover]

Our organization has been facing the same problem. We have an embedded survey on an enterprise site, and we cannot reach geopoint question from mobile devices. This is so critical for us, and we need to solve this problem or a workaround that will eliminate the problem.