JS 4.0: use of "splash screen" causes weird panning on pop up and navigation on mobile devices

[AZendel]

Hello all. I've created a JS 4.0 page that includes an ArcGIS.com web map. The page will be embedded in a mobile app.  We want to include a "splash screen" to encourage users to tap the map for more information about the map features.  The splash screen is displaying correctly for 4000 ms using the setTimeout function.  But once the map loads, we get weird navigation issues when

1) somebody taps a map feature that invokes the default popup (info window) that's docked to the bottom of the screen

2) the user attempts to spread and pinch zoom and pan on the map.

When #1 occurs, the map uncontrollably pans to the north.  On #2, the map often (but not always) wants to pan to the same location that #1 scrolls to.  This is happening on Chrome (only when the window is sized in mobile dimensions), but not IE. 

He's the map without the splash screen (and with a message box / alert instead -- not the behavoir that we want): http://cycleknox.ibikeknx.com/tmp/map.html

And he's the map with the splash screen: http://cycleknox.ibikeknx.com/tmp/map_with_splash.html

These html files will likely be taken down after our event, so I've also attached them for long-term prosperity.  The ArcGIS.com web map that the html references may also be removed, so you may need to repoint the attached HTML files to a different ArcGIS.com web map.

Any idea on what's causing this?  How to prevent it?

Thanks.

[ReneRubalcava · Accepted solution]

Not sure exactly what cause is, but does it help if you put the require method inside the siteTimeout, to delay the map creation?

Tested on my machine, and yeah, moving the require inside the setTimeout fixes the issue.

You can also load the webmap, but delay the view creation until inside the setTimeout as well.

require([
  // modules
], function (
  // modules
) {
    var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
            id: "fd6d257add064e30b8e5ee21282b2e5f"
        }
    });
    var isLegendVisible = false;
    setTimeout(function () {
        var elem = document.getElementById("splash");
        elem.disabled = true;
        elem.style.zIndex = -99;
        elem.parentNode.removeChild(elem);
        var view = new MapView({
            map: webmap,
            container: "viewDiv"
        });
        // ... other stuff
    }, 4000);
});