Why does Chrome auto-close links to my site with target of a new window?

Question

I'm seriously stumped on this, so if anyone can offer a clue, I'd really appreciate it.

Here's my site (built in rails): http://floating-autumn-3174.herokuapp.com/

When someone attempts to visit the site from a link on Facebook or Twitter, basically a new tab is loaded but then closes right away. This only happens in Chrome. Works just fine in Firefox.

If I right click on the link and then select "Open in New Tab" it loads fine.

If I right click and copy the link, it works just fine.

I thought it might be something with SSL redirects, but I tested with my staging environment (no SSL) and it works just fine.

So basically this auto-closing only happens in Chrome and when clicking on a link that loads a new tab.

Any clue what's going on or how I can better troubleshoot this?

EDIT

Ok, after looking into our included javascripts more I believe I've found the issue. It involves some JS we use to handle pop-ups. First let me explain what we're trying to do. We authenticate via Facebook. When a user click "Sign in via Facebook" a pop up launches and authenticates. When successful the popup closes and the main window refreshes in a signed in state. This all works fine but I realize that the popup closing code is killing all other new windows. Here' the full code snippet below:

function popupCenter(url, width, height, name) {
 var left = (screen.width/2)-(width/2);
 var top = (screen.height/2)-(height/2);
 return window.open(url, name,     "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top);
}

$(document).ready(function(){
$("a.popup").click(function(e) {
popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
e.stopPropagation(); return false;
});


if(window.opener) {
 window.opener.location.reload(true);
 window.close()
}
});

The last if statement is what I believe is causing the problem. I'm a serious JS noob so I'm not sure how to go about fixing this. Basically I only want the last condition to fire if the link is for the popup. How could I go about doing that? Thanks again for all the help.

EDIT 2

I went ahead with Rob's answer below and thought it was working but actually hit one edge case that I'm hoping to get help with. Apparently when the user goes through Facebook authentication the very first time the window.name is no longer "authPopup". I think thats because the popup actually goes through multiple steps and ends with a screen asking for permissions. In this scenario the popup does not close. On any subsequent login the popup closes as it doesn't need to go through all the steps and the "authPopup" condition remains true. How would I be able to handle this?

EDIT 3

I've arrived at a solution that I believe works. I first looked into the window name of the Facebook auth screen per Rob's suggestion but found that it changes each time and is not easily predictable. So instead I decided to go the global variable route. Here's the final code that I'm using in case others find it useful.

function popupCenter(url, width, height, name) {
 var left = (screen.width/2)-(width/2);
 var top = (screen.height/2)-(height/2);
 popupValue = "on";
 return window.open(url, name, "menubar=no,toolbar=no,status=no,width="+width+",height="+height+",toolbar=no,left="+left+",top="+top     );
}

$(document).ready(function(){
$("a.popup").click(function(e) {
popupCenter($(this).attr("href"), $(this).attr("data-width"), $(this).attr("data-height"), "authPopup");
e.stopPropagation(); return false;
});


if(window.opener && window.opener.popupValue === 'on') {
 delete window.opener.popupValue;
 window.opener.location.reload(true);
 window.close()
}
});

Answer 1

Simply check the value of the window.name property:

if (window.opener && window.name === 'authPopup') {
    window.opener.location.reload();
    window.close();
}

Additionally, you can also validate the URL of the opener, so that other websites will not be refreshed when they open your site in a window called "authPopup". Since the pages are at the same domain, you can also set a variable in your original window, so that the page does not refresh when the user navigates away, to another page.

Answer 2

There's a mysterious issue with the copy of jQuery attached to the page on line 23:

 <script src="/assets/application-21790dbf22ce0f60b3dc6f16af392f76.js" type="text/javascript"></script>

Replacing the contents of this file with the current version of jQuery from jquery.com fixes this issue, or you can use a CDN hosted copy:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Tested this fix with a downloaded copy of your page.

The rouge jQuery script is minified so it's near impossible / really stupid to figure out what's actually wrong with it... Major difference I see is that the broken copy contains window.close() while the current copy of jQuery doesn't. Might be a broken plugin.

EDIT:

On further inspection, this fixes the issue, but reveals another: changing page in the slider closes the opened tab. Are you pulling in remote content to the carousel elements? I'm stumped too now!