Map Embeds: Initial popup has transparent background

[deleted-user-pDhHNdx3RgUH]

I'm embedding a Web Map onto my site. The map is broken up into areas, and when you click on each area, a popup displays more information about it. The problem I'm having is that popup is not displaying properly. It has a transparent background, and some initial CSS is being set to display:none; or width:0; -- which is causing it not to show up properly.

The map embed is initially hidden (with display:none;) behind a tab (javascript functionality). I think this is creating the issue.

Once you click on the "maximize" icon, the white background appears, and everything works as expected.

This is the javascript that I'm using for the show/hide tabs:

http://jsbin.com/lorovu/edit?html,js 

Is there any way to redraw the map, or reset the width/height/display values... either after the page loads, or when the tab is clicked? I would really like the initial popup to be displayed normally, with it's white background, so you can read it's contents.

Thanks,

Dave

[KellyHutchins]

First if you haven't already try clearing your browser cache. Does the problem occur when you view the map on its own outside of the show/hide tabs? Is it only an issue in certain browsers?   I ran a quick test using the app and the popups are showing correctly the first time. 

http://www.arcgis.com/apps/Embed/index.html?appid=80f7e226c5ba45068de0550d8ccb0ed6 

I added the test map above to the second tab (Ninja) and can't repro the problem. 

JS Bin - Collaborative JavaScript Debugging 

[deleted-user-pDhHNdx3RgUH]

Thanks Kelly. I really appreciate you trying to recreate the issue in JS Bin.

Without changing any code, the issue appears to have resolved itself. I did launch the site on a live domain, and it's now served up via https, but those are the only things I can think of that have changed from the testing environment.

Either way, it's working now, which is fantastic.

Happy New Year!

Dave

[deleted-user-pDhHNdx3RgUH]

Kelly Hutchins , actually, upon further review, it's sometimes working, and sometimes not working. I've cleared all my cache, and have tried opening it in a private browsing window. I'm testing mostly in Chrome on Mac, but I'm seeing the issue in Mac/Safari as well. And in Mac/Firefox, the iframe actually doesn't load on the initial page load. If I right-click and choose "reload frame," it then displays correctly. I noticed some errors with the js.arcgis.com files in the web console (attached screenshot). Not sure if you were aware of those.

And upon pulling up your example on JS Bin again, I was seeing the problem right there in JS Bin. If you clear your cache, or try it in a private browsing window, I think you might be able to re-create it. It seems as though if you have already loaded that maps URL in your browser once, it will work fine. But if it is the very first time you are loading that map, that's when the issue arises.

Is there any way, using javascript, to reload the map when an element on the page is clicked? I could try adding that code to my javascript that runs on the clicking of the tabs that show/hide the map.

Thanks!

JS Bin, error reproduced

Web console errors in Mac/Firefox

[KellyHutchins]

Just tested the jsbin in incognito mode and I can't repro either the popup issue or the console errors you are seeing. Also tried testing the map outside of an iframe in incognito mode and everything is working for me.  Tested in Chrome on Mac. 

https://rrpdc.maps.arcgis.com/apps/Embed/index.html?webmap=89edafaaf60b4d2383e825a682ed3221&extent=-...