Javascript 流星：登记表有时不’；渲染不好

一些用户（包括我在内）根本看不到注册表单——尤其是在chrome中

请先查看Firefox：

Chrome中会发生什么：

仅当您将鼠标悬停在以下区域上时，按钮和输入字段才会开始显示：

或在调整浏览器窗口的大小时显示所有内容

最奇怪也有点可怕的是，当我向上滚动时，我看到了背景中的注册表表单：

我正在使用

useraccounts

包

注意：下面是答案

我的配置文件（config/at_config.js）：

我的助手文件（client/templates/account templates/joinus.js）：

我的html文件（client/templates/account templates/joinus.html）：

加入我们
你的利益

作为OSN的一员，您将成为对开放战略感兴趣的学者的一部分。加入OSN有很多优点。注册是免费的。
加入我们
新闻
作为成员，您可以向整个开放战略社区提交新闻，并传播相关研究结果
合作
通过搜索OSN成员的数据进行国际合作
文学类
搜索书目中特定主题的开放式战略文献
{{>atformstate='signUp'}

编辑：

感谢@Jeremy Iglehart，错误可能归结为以下文件：

客户端/模板/帐户模板/at_form_mod.html：

<template name="myAtForm">
  {{#unless hide}}
    <div class="at-form">
      <!-- {{#if showTitle}}
        {{> atTitle}}
      {{/if}} -->
      {{#if showError}}
        {{> atError}}
      {{/if}}
      {{#if showResult}}
        {{> atResult}}
      {{/if}}
      {{#if showPwdForm}}
        {{> atPwdForm}}
      {{/if}}
      {{#if showTermsLink}}
        {{> atTermsLink}}
      {{/if}}
      {{#if showSignUpLink}}
        {{> atSignupLink}}
      {{/if}}
      <!-- {{#if showServicesSeparator}}
        {{> atSep}}
      {{/if}} -->
      {{#if showOauthServices}}
        {{> atOauth}}
      {{/if}}
      <!-- {{#if showSignInLink}}
        {{> atSigninLink}}
      {{/if}} -->
    </div> <!-- end main div -->
  {{/unless}}
</template>

{{{#除非隐藏}
{{{#如果淋浴}
{{>atError}
{{/if}
{{#如果显示结果}
{{>atResult}
{{/if}
{{{#如果显示PWDForm}
{{>atPwdForm}
{{/if}
{{{如果showTermsLink}
{{>atTermsLink}
{{/if}
{{{#如果显示}
{{>atSignupLink}
{{/if}
{{#如果showOauthServices}
{{>atOauth}
{{/if}
{{/除非}

可以在此处找到.less文件（太长，无法在此处粘贴）：

---

客户端/模板/样式/样式。Amir，我不知道为什么Chrome会给你带来问题

如果我是你，我会编辑这个。除非你真的需要那个“隐藏”，否则我会去掉所有的if语句。在我看来，您的设计希望该页面一直处于打开状态

从模板级别中取出你不想要的，看看你得到了什么

这是一个黑客，但它可能会让你移动

例如：

<template name="myAtForm">
    <div class="at-form">
        {{> atTitle}}
      {{#if showError}}
        {{> atError}}
      {{/if}}
      {{#if showResult}}
        {{> atResult}}
      {{/if}}

        {{> atPwdForm}}

      {{#if showTermsLink}}
        {{> atTermsLink}}
      {{/if}}
      {{#if showSignUpLink}}
        {{> atSignupLink}}
      {{/if}}
      <!-- {{#if showServicesSeparator}}
        {{> atSep}}
      {{/if}} -->
        {{> atOauth}}
      <!-- {{#if showSignInLink}}
        {{> atSigninLink}}
      {{/if}} -->
    </div> <!-- end main div -->
</template>

{{>atTitle}
{{{#如果淋浴}
{{>atError}
{{/if}
{{#如果显示结果}
{{>atResult}
{{/if}
{{>atPwdForm}
{{{如果showTermsLink}
{{>atTermsLink}
{{/if}
{{{#如果显示}
{{>atSignupLink}
{{/if}
{{>atOauth}

---

只需拿出你不需要的东西。

Amir，首先-很棒的设计。。。坚持下去，你会成功的。我觉得这是个流氓CSS问题不是吗？有东西被设置为隐藏或其他。你有任何CSS在那里可能会这样做吗？在我看来，这可能是你的问题所在-在

{{{{除非隐藏}}下，在那里你有{{如果

showOauthServices}`你在哪里定义

hide

和

showOauthServices

？@JeremyIglehart:谢谢你的激励性话语。非常感谢：）虽然我想在这个项目结束后停止编程：（不幸的是，我不知道这是在哪里定义的。它在useraccounts包中。但这已经是一个很好的提示。非常感谢：）Amir P.s.：我只是想知道为什么Chrome会出问题永不放弃！不要让他们那样赢；P你可以做到这一点，只要保持一致。最终，你会打破这个坚果或找到一个解决它的方法。在那以后的一段时间里，你会遇到一个更难的问题，你也会解决这个问题。坚持下去。这就是我们所做的，你也可以做到！很棒的设计，你做得很好。享受问题，享受陷入困境，享受解决问题的感觉。夜越长，黎明越亮。对不起，没用，不要放弃！你会找到的。我认为对你来说最好的事情是学习和“自己滚”。我敢打赌，如果你通读一遍，你会明白你需要做什么。别难过。谢谢你热情的话语。

<template name="joinUs">

  <!-- Stage -->
  <header>
    <div class="header-content">
        <!-- Breadcrumb -->
        <ol class="breadcrumb text-left">
            <li><a class="breadcrumb-link" href="{{pathFor route = 'home'}}">Home</a></li>
            <li class="active">Join us</li>
        </ol><!-- End of Breadcrumb -->
        <div class="header-content-inner">
            <h1>YOUR BENEFITS</h1>
            <hr>
            <h2>As a member of OSN you will become part of a thriving network of scholars interested in open strategy. There are many advantages of joining the OSN. Registration is free.</h2>
            <button type="button" href="#joinus" class="btn btn-primary btn-xl page-scroll js-scrollToForm">JOIN US</button>
        </div>
    </div>
  </header> <!-- ./Stage -->

  <!-- Services Section -->
  <section id="services">
    <div class="container">
        <div class="row text-center extra-spacing-top extra-spacing-bottom joinus-icons">
            <div class="col-sm-4">
                <span class="fa-stack fa-4x">
                    <!-- <i class="fa fa-circle fa-stack-2x"></i> -->
                    <i class="fa fa-bullhorn fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">News</h4>
                <p class="text-muted">As a member you can submit news to the whole Open Strategy community and disseminate related research findings.</p>
            </div>
            <div class="col-sm-4">
                <span class="fa-stack fa-4x">
                    <!-- <i class="fa fa-circle fa-stack-2x text-primary"></i> -->
                    <i class="fa fa-comments-o fa-stack-1x fa-inverse joinus-icons"></i>
                </span>
                <h4 class="service-heading">Collaborations</h4>
                <p class="text-muted">Collaborate internationally by searching for data on OSN members.</p>
            </div>
            <div class="col-sm-4">
                <span class="fa-stack fa-4x">
                    <!-- <i class="fa fa-circle fa-stack-2x text-primary"></i> -->
                    <i class="fa fa-newspaper-o fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">Literature</h4>
                <p class="text-muted">Search for Open Strategy literature on specific topics within the Bibliography</p>
            </div>
        </div>
    </div>
  </section>

  <!-- <div id="js-scrollStop"></div> -->

  <!--     Registration Form -->
  <section class="bg-light-gray extra-spacing-top" id="js-scrollStop">
    <div class="container">
        <form>
            {{> atForm state='signUp'}}
        </form>
    </div>
  </section>
</template>

<template name="myAtForm">
  {{#unless hide}}
    <div class="at-form">
      <!-- {{#if showTitle}}
        {{> atTitle}}
      {{/if}} -->
      {{#if showError}}
        {{> atError}}
      {{/if}}
      {{#if showResult}}
        {{> atResult}}
      {{/if}}
      {{#if showPwdForm}}
        {{> atPwdForm}}
      {{/if}}
      {{#if showTermsLink}}
        {{> atTermsLink}}
      {{/if}}
      {{#if showSignUpLink}}
        {{> atSignupLink}}
      {{/if}}
      <!-- {{#if showServicesSeparator}}
        {{> atSep}}
      {{/if}} -->
      {{#if showOauthServices}}
        {{> atOauth}}
      {{/if}}
      <!-- {{#if showSignInLink}}
        {{> atSigninLink}}
      {{/if}} -->
    </div> <!-- end main div -->
  {{/unless}}
</template>

<template name="myAtForm">
    <div class="at-form">
        {{> atTitle}}
      {{#if showError}}
        {{> atError}}
      {{/if}}
      {{#if showResult}}
        {{> atResult}}
      {{/if}}

        {{> atPwdForm}}

      {{#if showTermsLink}}
        {{> atTermsLink}}
      {{/if}}
      {{#if showSignUpLink}}
        {{> atSignupLink}}
      {{/if}}
      <!-- {{#if showServicesSeparator}}
        {{> atSep}}
      {{/if}} -->
        {{> atOauth}}
      <!-- {{#if showSignInLink}}
        {{> atSigninLink}}
      {{/if}} -->
    </div> <!-- end main div -->
</template>