Проблема при верстки, возникают проемы в переключателе

Question

Верстаю переключатель по такому принципу, но беда в том, что на различных разрешениях и на mac видны белые проемы, как это решить не пойму прилагаю скрин и codepen, того, что я имею ввиду.

<div class = "outer-div">
  <div></div>
  <div class = "active"></div>
</div>

.outer-div{
  width:100px;
  height: 30px;
  border-radius:25px;
  display:flex;
  overflow:hidden;
  border: 1px solid black;
  box-sizing:border-box;
}

.outer-div div {
  width: 50%;
  height:100%
}

.outer-div div.active{
  background:red;
}

ссылка на codepen

Answer 1

я бы немного погрешил бы на браузер и кривую поддержку некоторых стилей

проверить можно здесь, к примеру: https://caniuse.com/?search=box-sizing

я бы посмотрел стили, которые вы используете применимо к конкретному браузеру и возможно добавил бы дублирование (к примеру с -webkit-)

И еще

Возможно дело в сглаживании border-radius и тогда вам надо посмотреть вот эту ссылку

https://tanalin.com/_x/demos/blog/2011/border-radius-rendering/

Answer 2

Не нашёл косяк в border, полагаю браузер почему-то при увеличении начинает считать отступ внутренний, но инспектор его не видит, с box-shadow проблема исчезает. Надеюсь такой способ тебе тоже поможет.

/* Красная капсула */

.outer-div{
  width:100px;
  height: 30px;
 
  margin-bottom: 10px;
 
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  border-radius: 30px;
}

.outer-div div {
  width: 50%;
  height:100%
}

.active{
  background-color: #ff0000;
}


/* Синяя капсула */

.outer-div-blue {
  width:100px;
  height: 30px;
 
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
  
  -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
  border-radius: 30px;
}

.outer-div-blue div {
  width: 50%;
  height:100%
}

.active-blue {
  background-color: blue;
}

<div class = "outer-div">
  <div></div>
  <div class = "active"></div>
</div>

<div class = "outer-div-blue">
  <div></div>
  <div class = "active-blue"></div>
</div>

БЛОГ НА HUSL

Проблема при верстки, возникают проемы в переключателе

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