@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;
}

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

5c7559c1365d6278549290.png

upd: codepen отображает окружности как овалы https://codepen.io/AlShest/pen/xBbLbK
  • Вопрос задан
  • 74 просмотра
Пригласить эксперта
Ответы на вопрос 1
galkan
@galkan
Chrome добавляет button padding, нужно просто их обнулить.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы