Почему кастомные кнопки слайдера ведут по-разному в разных браузерах?

Question

[AlShest]

Я кастомизировал кнопки-дотсы slick слайдера: точки в окружности. В браузерах Firefox и Edge отображается все как надо, а в Хроме при изменении размера окна браузера точка начинает рандомно дергаться и сдвигаться.
Вот код:

.my-dots {
	display: block;
	width: 100%;
	padding: 0;
	list-style: none;
	text-align: center;
}
.my-dots li {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.my-dots li button {
  display: block;
  width: 10px;
  height: 10px;
  cursor: pointer;
  color: transparent;
  background-color: #eeeeed;
  border: 1px solid @base-red;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  outline: none;
}
.my-dots li button:hover,
.my-dots li button:focus {
  outline: none;
}
.my-dots li.slick-active button:before {
   position: absolute;
	    display: block;
	    height: 4px;
	    width: 4px;
	    -moz-border-radius: 50%;
  		-webkit-border-radius: 50%;
	    border-radius: 50%;
	    background: @base-red;
	    content:  '';
	    margin: 2px;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}

Пробовал задавать Хром хак, но это не помогло.
Как это можно исправить или переделать?



upd: codepen отображает окружности как овалы https://codepen.io/AlShest/pen/xBbLbK

Comments

[yarnstart]

Воспроизведите свою проблему в песочнице

[Ankhena]

Позиционируйте псевдо так:

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Альтернативный вариант:
Внутренний кружок это сам элемент, вокруг него 2 тени.
У неактивного кружок прозрачный.

Еще альтернативный вариант: тоже самое, но радиальным градиентом.

Если всё не так, то делайте песочницу, в которой видно проблему.

Answer 1

[galkan]

Chrome добавляет button padding, нужно просто их обнулить.