Тонкий линейный градиент не отображается в Firefox для Android

Question

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

Вот мой код:

<div class="menu">
  <div>Menu1</div>
  <div>Menu2</div>
  <div>Menu3</div>
  <div>Menu4</div>
  <div>Menu5</div>
</div>

.menu > div {
  position: relative;

  cursor: pointer;
  text-align: center;
}

.menu > div:after {
  content: "";
  position: absolute;
  bottom: -0.05vw;
  left: 5%;
  width: 90%;
  height: 0.05vw;

  background-image: linear-gradient(90deg, transparent, white 25%, white 75%, transparent);
}

В Chrome для Android он очень тонкий, как мне бы хотелось.

Кажется, что 0.05vw слишком тонкий, чтобы отображать FF для Android, потому что с 0.13vw и выше он начинает показывать, но в этом случае он слишком толстый. calc(0.4px + 0.05vw) показывает, и так немного лучше, но все еще слишком густо.

Если я выбрасываю градиент в пользу сплошного белого фона, он показывает и становится тонким, поэтому в настоящее время я использую его как запасной вариант, хотя и не идеальный.

Телефон Galaxy S4 с FF для Android 67.0.3.

Есть ли способ заставить его отображаться или мне нужно решить его по-другому?