The category breadcrumb template in
templates/components/bread-crumbs.js.handlebars contains LI tag wrappers around the references to the category-drop component (
components/categorydrop.component.js). However, the component is already a LI itself, so the browser receives a HTML sequence
<li> <li>foo</li> </li> from the Ember buffer. The first LI tag is automatically closed by the browser, leading to the rendered structure being
<li></li> <li>foo</li> .... This extra LI tag causes a visual issue, which by coincidence isn’t visible on the default theme. See screenshot below.
Prevent rendering of excessive
<li> wrapper around a category breadcrumb which already is a
<li> wrapper coming from the template is automatically closed by the browser during the HTML parsing step, causing an empty
<li> being visible in the rendered source (preceding the first breadcrumb). This causes a visual bug when not using the default Discourse stylesheet, because the extra LI element pushes the content to the right and sometimes also renders an extra black pixel.