Пользовательская полоса прокрутки CSS для разных операционных систем и браузеров

Нашёл подобный вопрос, где указаны действительно рабочие подходы для исправления отображения полосы прокрутки в Firefox и Chrome.

Однако, в иных системах, особенно в Windows 11 для Firefox (125), эта полоса прокрутки приобретает иное поведение из-за чего становится не понятно, что сегмент можно прокрутить. (Скрины прилагаются в конце)

Проблемы с поведением для Windows 11 (возможно есть ещё системы с подобной проблемой, однако прочие не тестировались):

1. Бегунок прокрутки появляется при наведении на элемент в котором она должна находится
2. Не появляется задний фона для полосы прокрутки
3. Более-менее необходимый вид приобретается только кликнув на бегунок прокрутки

Есть ли какие-либо возможные решения проблемы? В статье на Хабре говорят о спец настройках по-умолчанию именно для Windows 11 + Firefox Всегда показывать полосы прокрутки, однако есть ли возможность независимо от этой настройки задать нужные стили? На версии Windows 10, как для Firefox, так и для Chrome следующий код срабатывает как надо.

@supports (scrollbar-color: auto) and (not selector(::-webkit-scrollbar)) {
    ul {
      scrollbar-color: #bebebe #eaeaea;
      scrollbar-width: thin;
    }
}

ul::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background: #eaeaea;
}

ul::-webkit-scrollbar-thumb {
  background: #bebebe;
  border-radius: 2px;
  border: none;
}

На первом фото нет мышки на элементе ul

На втором фото я навёл мышку на элемент ul и получил бегунок

На третьем фото я бегунок тяну

На четвёртом фото ожидаемый результат (по-умолчанию)