こんにちは、Foundationでかなり厄介なバグが発生しました。初めてウェブサイトにアクセスしたとき、次のようにカテゴリ/タグのパンくずリストが表示されます。
そして、「新しいトピックを作成する」という長いボタンが表示されます。
しかし、ページを更新すると、次のような表示に変わります。
「最新」ボタンと、新しいトピックを作成するためのトピック画像ボタン(長い「新しいトピックを作成する」ボタンなし)のみが表示されます。これらは私のスクリーンショットではありません。
- 新しい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 のみ表示されるため、ここで問題が発生しているのではないかと推測します。
よろしくお願いします。
