CSS ошибка в Firefox, которая иногда добавляет дополнительный 1 пиксель к подменю

Question

Я пытаюсь работать с меню навигации в сильно адаптированной теме Wordpress, но сталкиваюсь с очень странной ошибкой, затрагивающей подменю.

Ошибка всегда добавляет 1 пиксель справа от подменю прокрутки, выводя его из выравнивания с родительским элементом меню:

Сравните с Chrome:

Однако, что именно вызывает, трудно определить: он всегда срабатывает на страницах, где содержимое находится ниже сгиба (т.е. при наличии полосы прокрутки), но при меньших точках останова, даже когда полоса прокрутки присутствует, может или может не срабатывать вообще.

Иногда просто изменяя размер браузера до случайного большего размера, а затем исходный размер может заставить ошибку появляться или исчезать без каких-либо изменений в коде.

Глядя на макет с помощью инструментов разработчика Firefox, не похоже, что дополнительный пиксель является отступом, так что этот вопрос отличается от этого здесь , и решение этого вопроса также не ' я не работаю

Если у кого-то есть идеи, что может быть причиной этого, я буду признателен, потому что это сводит меня с ума.

Ниже приведена HTML-разметка для меню навигации (динамически генерируется с помощью JavaScript):

<nav class="main-navigation">
  <ul id="primary-menu" class="primary-menu menu">
    <li class="menu-item"><a href="http://localhost/wordpress">Home</a></li>
    <li class="menu-item"><a href="http://localhost/wordpress/about">About</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="http://localhost/wordpress/about/history/">History</a></li>
        <li class="menu-item"><a href="http://localhost/wordpress/about/people">People</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="http://localhost/wordpress/services/">Services</a></li>
    <li class="menu-item"><a href="http://localhost/wordpress/what-we-do">What We Do</a></li>
    <li class="menu-item"><a href="http://localhost/wordpress/the-library/">The Library</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="http://localhost/wordpress/the-library/gallery/">Gallery</a></li>
        <li id="menu-item" class="menu-item"><a href="http://localhost/wordpress/audio-and-video/">Audio and Video</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="http://localhost/wordpress/donate/">Donate</a></li>
    <li class="menu-item"><a href="http://localhost/wordpress/contact/">Contact</a></li>
  </ul>
</nav>

А вот основная часть соответствующего CSS:

.primary-menu,
.primary-menu ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.primary-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc(var(--menuItemsSpacing) / -2);
    margin-right: calc(var(--menuItemsSpacing) / -2);
}

.primary-menu a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: initial;
    overflow: none;
}

.primary-menu .current-menu-item a {
    color:#FFF;
    background-color:#000; 
}

.primary-menu>li {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400;
    position:relative;
    margin-bottom: 20px;
}

.primary-menu>li a {
    padding: 10px 25px 10px 25px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color; 
}

.primary-menu>li:hover a,
.primary-menu>li:focus a,
.primary-menu>li:active a {
    background-color: #000;
    color: #FFF;
}

.primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    margin-top: var(--dropdownTopOffset);
    min-width: 100%;
    width:var(--dropdownMenuWidth);
    display:block;
    border-radius: 2px;
    background: var(--dropDownBackground);
}

.primary-menu .sub-menu li {
    font-size: 16px;
    font-weight: 400;
    text-transform: initial;
    line-height: 1.6;
        box-sizing: border-box;
}

.primary-menu .sub-menu li a {
    transition: 300ms padding ease-out;
}

.primary-menu .sub-menu li a:hover {
    padding-left:32px;
    color: var(--menuHoverColor);
}

.primary-menu .sub-menu li.current-menu-item a {
    color: var(--menuHoverColor)
}

.primary-menu .sub-menu li:not(:last-child) {
    border-bottom: var(--dropDownDivider)
}

.primary-menu>li>.sub-menu>li:not([data-submenu])>ul {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: none;
    transition: none
}

.primary-menu .menu-item-has-children,
.primary-menu .page_item_has_children {
    position: relative
}

.primary-menu>.customize-partial-edit-shortcut {
    margin-left: calc(var(--menuItemsSpacing) / 2)
}