Why do custom slider buttons behave differently in different browsers?

Question

css

I customized the dots buttons of the slick slider: dots in a circle. In Firefox and Edge browsers, everything is displayed as it should, and in Chrome, when the browser window is resized, the dot starts to randomly twitch and move.
Here is the code:

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

Tried to ask Chrome hack, but it did not help.
How can this be fixed or changed?

upd: codepen renders circles as ovals https://codepen.io/AlShest/pen/xBbLbK

Answer 1

Chrome adds button padding, you just need to reset them.