ホームページでカテゴリ/タグのパンくずリストがちらつく

こんにちは、Foundationでかなり厄介なバグが発生しました。初めてウェブサイトにアクセスしたとき、次のようにカテゴリ/タグのパンくずリストが表示されます。

imageそして、「新しいトピックを作成する」という長いボタンが表示されます。

しかし、ページを更新すると、次のような表示に変わります。

「最新」ボタンと、新しいトピックを作成するためのトピック画像ボタン(長い「新しいトピックを作成する」ボタンなし)のみが表示されます。

これらは私のスクリーンショットではありません。

  • 新しいFoundationインスタンスでもまだ発生します
  • コンポーネント/プラグインが干渉しているようには見えません

「バグのある」ページを検査すると、次のことがわかります。


  <ol class="category-breadcrumb hidden">
  <!--
      <li>
        <details id="ember8" class="select-kit single-select combobox combo-box category-drop ember-view category-breadcrumb__category-selector">    <summary aria-label="Filter by: Categories" name="Filter by: Categories" data-name="Categories" data-value="" tabindex="0" role="listbox" id="ember8-header" class="select-kit-header single-select-header combo-box-header category-drop-header ember-view"><div class="select-kit-header-wrapper">
      <div title="Categories" data-name="Categories" class="select-kit-selected-name selected-name choice">
<!--
-->
<!--
-->
    <span class="name">
      Categories
    </span>

<!--
-->  </div>


  <svg class="fa d-icon d-icon-angle-right svg-icon fa-width-auto angle-icon svg-string" width="1em" height="1em" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#angle-right">
    </use></svg>
</div></summary>

  <div id="ember8-body" class="select-kit-body ember-view" style="position: absolute; width: 370px; top: 0px; left: 0px; transform: translate(10px, 3px);"><!--
--></div>
</details>
      </li>

      <li>
        <details id="ember10" class="select-kit single-select combobox combo-box tag-drop tag_all ember-view">    <summary aria-label="Filter by: Tags" name="Filter by: Tags" data-name="Tags" data-value="" tabindex="0" role="listbox" id="ember10-header" class="select-kit-header single-select-header combo-box-header tag-drop-header ember-view"><div class="select-kit-header-wrapper">
      <div title="Tags" data-name="Tags" class="select-kit-selected-name selected-name choice">
<!--
-->
<!--
-->
    <span class="name">
      Tags
    </span>

<!--
-->  </div>


  <svg class="fa d-icon d-icon-angle-right svg-icon fa-width-auto angle-icon svg-string" width="1em" height="1em" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#angle-right">
    </use></svg>
</div></summary>

  <div id="ember10-body" class="select-kit-body ember-view" style="position: absolute; width: 370px; top: 0px; left: 0px; transform: translate(10px, 3px);"><!--
--></div>
</details>
      </li>

  <!--
-->
</ol>

<!--
-->

  <ul id="navigation-bar" class="nav nav-pills">
    <li>
      <button class="btn no-text fk-d-menu__trigger list-control-toggle-link-trigger" aria-expanded="false" data-identifier="list-control-toggle-link" data-trigger="" type="button" id="ember16">
<!--
-->
<!--
-->
          <span class="list-control-toggle-link__text">Latest</span>
          <svg class="fa d-icon d-icon-discourse-chevron-expand svg-icon fa-width-auto svg-string" width="1em" height="1em" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#discourse-chevron-expand">
    </use></svg>
        


<!--
-->
      </button>

<!--
-->
    </li>
    <li>
      <!--
-->
    </li>
</ul>

<div class="navigation-controls">
<!--
-->
  <div class="row dismiss-container-top"><!--
-->
</div>

<!--
-->
<!--
-->
<!--
-->
  <!--
-->

    <div class="d-combo-button" role="group" aria-label="New topic and drafts">
  
    <button class="btn no-text btn-icon d-combo-button-button btn-primary" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon fa-width-auto svg-string" width="1em" height="1em" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="#far-pen-to-square">
    </use></svg>  <span aria-hidden="true">
      ​
    </span>
    
  

<!--
-->
</button>


<!--
-->
</div>


  <!--
-->

<!--
-->
<!--
-->
</div>

<!--
-->
<!--
-->

category-breadcrumb hidden」が、初期ロード時(「バグ」が発生する前、つまりページを更新する前)には表示されず、通常の category-breadcrumb のみ表示されるため、ここで問題が発生しているのではないかと推測します。

よろしくお願いします。

2番目のスクリーンショットはモバイル版です。

リフレッシュのたびに一貫して表示されますか?切り替わりますか?

また、この動作はモバイルとデスクトップのどちらで発生していますか?

「初めて」本当にそれが見えるのでしょうか?なぜなら、「新しいトピック」ボタンが見える場合、あなたはログインしているからです。

表示されているページに「新しいトピックを作成」ボタンがないのは、ログアウトしているユーザー向けです。

実際に何が起こっているかを確認するために、ご自身でスクリーンショットを撮ってみてはいかがでしょうか。

「いいね!」 1

いいえ、ランダムですが比較的持続的です。「サイクル」と考えてもいいかもしれません。

両方です。

ログインしているユーザーについて話しています。

残念ながら、私の投稿にあるスクリーンショット以上のものはなく、スクリーンショット1とスクリーンショット2が切り替わり続けるだけです。

参考になるかもしれない追加情報:

  • サイトテキストの js.categories.categories_labelcategories から Categories に編集されています。
  • The discourse breadcrumb links component (有効にしていたもの) を有効/無効にして、何らかの変化があるか試しています。可能性は低いですが。
「いいね!」 1

“.category-breadcrumb hidden” が二度と表示されないようにブロックすることはできませんか?

まずセーフモードで試してみてください。そうすれば、コアの問題かどうかを確認できます。

「いいね!」 2

まだ同じ動作をしています。

これについてはどうでしょうか?可能でしょうか?ありがとうございます。

いいえ、見てください、現時点では何が起こっているのか全く不明です。しかし、デスクトップでモバイル版が表示されているとのことですので、それはもっと大きな問題です。ジェイも言ったように、ログアウト状態のスクリーンショットでは問題の特定にあまり役立ちません。

何が起こっているのかをよりよく理解するために、スクリーンレコーディングが必要だと思います。コンソールも確認してください。

「いいね!」 2

ナビゲーションバー(通常「すべてのカテゴリ」/「タグ」または「最新」が表示される場所)にバグがあります。

時々、ナビゲーションバーは次のように表示されます(通常は初回ログイン時):

image(これが希望する表示です)

しかし、セルフホスト型Discourseインスタンスを操作し、ページを(複数回)更新すると、ナビゲーションバーは突然次のように変わり、「最新」が表示されます。

2番目のスクリーンショットで重要なのは、ナビゲーションバーである「最新」だけであり、これは完全に変化し、「すべてのカテゴリ/タグ」ボタンが消えます。スクリーンショット内の他のものには焦点を当てないでください。これは完全にランダムなものです。

よろしくお願いします。

/categoriesにアクセスしたときにのみ、目的のコアが表示され、それ以外の時間帯では表示されないということでしょうか?他のユーザーはホームページを/categoriesから変更しているか、あるいは異なるビューを取得しているのかもしれません。

私が説明しているのはまさにそれだと思います。/latestにいるときは画像のような表示になり、カテゴリにいるときは別のビューが表示されます。

もしあなたのサイトがログイン不要であれば、URLを共有していただけると役立つかもしれません。

残念ながら、そうは思いません。すべてのバグの「サイクル」は通常の「Site.com」に表示されます(私のランディングページはLatestではsite.comですが、site.com/latestではありません)。