Javascript 谷歌登录按钮没有'；如果父元素被隐藏，则不能在Firefox中加载

我正在使用Google登录JavaScript客户端动态创建一个G+登录按钮。 代码如下所示：

<div id="googleSignInButton">
    <span class="g-signin"
        data-scope="openid email"
        data-clientid="{{flow.client_id}}"
        data-redirecturi="{{flow.redirect_uri}}"
        data-accesstype="offline"
        data-cookiepolicy="single_host_origin"
        data-callback="googleLoginCallback"
        data-approvalprompt="force">
    </span>
</div>

它很好用。但在一种特定情况下，它不会加载。 当使用firefox并隐藏其父元素（display:none）时，当显示其父元素时，它根本不会显示

例如，检查JSFIDLE（检查html注释）：

---

在Firefox上运行时，如果加载google API时元素“不可见”，它将直接以元素的样式将宽度和高度属性设置为1px。不可能通过CSS更改它

一种解决方案是在使元素可见后显式初始化API。您可以使用

go

方法执行此操作

<script >
  window.___gcfg = {
    lang: 'en-US',
    parsetags: 'explicit' //Configure to initialize explicitly
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

检查这个

---

有一个工作示例。

它在最初隐藏时被分配了1px的宽度和高度。我尝试设置宽度/高度，但最终没有任何区别。

var $ = document.querySelector.bind(document);

function showHide() {

  var login_panel = $("#login_panel");
  console.log(login_panel);
  var display = login_panel.style.display === "none" ? "block" : "none";
  login_panel.style.display = display;
  gapi.signin.go(login_panel); //Initialize the API after the element becomes visible.
}