안녕하세요, Foundation에서 꽤 귀찮은 버그를 발견했습니다. 제 웹사이트에 처음 접속하면 카테고리/태그 브레드크럼이 다음과 같이 보입니다:
그리고 긴 “새 주제 만들기” 버튼도 보입니다.
하지만 페이지를 새로고침하면 다음과 같은 모습으로 바뀝니다:
“최신(Latest)” 버튼과 새 주제를 만들기 위한 주제 이미지 버튼만 있고 (긴 “새 주제 만들기” 버튼은 없습니다).
참고로 이 스크린샷들은 제 것이 아닙니다.
- 새 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 hidden”은 초기 로드 시 (즉, 버그가 나타나기 전, 페이지를 새로고침하기 전)에는 나타나지 않습니다. 그때는 일반적인 category-breadcrumb만 보입니다.
도와주셔서 감사합니다.