Баг border solid в firfox Firefox

Question

В переключателе темы у меня есть стиль "border: 1px solid #fafafa", однако в Firefox в нижней части переключателя у бордера проявляется полоса примерно в 2px, в chrome и других браузерах такого нет.

Минимальный пример:

body {
  background-color: #000;
}

/* dark-mode-toggle start */
.dark-mode-toggle {
    margin: 15px 15px;
}

.checkbox {
    opacity: 0;
    position: absolute;
}
  
.theme-switch {
    width: 50px;
    height: 26px;
    border: 1px solid #fafafa;
    display: flex;
    border-radius:50px;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    transform: scale(1.5);
}
  
  
.ball {
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;
    position: absolute;
    left: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
}

<div class="dark-mode-toggle">
    <input type="checkbox" id="checkbox" class="checkbox">
    <label class="theme-switch" for="checkbox">
      <img class="img-switch" src="#" alt="">
      <img  class="img-switch" src="#" alt="">
      <span class='ball'></span>
    </label>
</div>

Также прикладываю скриншот:

Как убрать полосу внизу?

БЛОГ НА HUSL

Баг border solid в firfox Firefox

Ответы (0 шт):