Почему маленькая точка CSS не имеет таких же пропорций в Chrome?

Question

Я работаю над веб-сайтом, в верхней части которого находится кнопка меню из трех точек.Каждая из этих точек имеет ширину 4 пикселя и высоту, имеет радиус границы: 100% и поле имеет значение 2 пикселя.

.dot {
    background: black;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    border: 0;
    padding: 0;
    display: inline-block;
    margin: 2px;
}

<div class="dot"></div>

В Chrome 73 он не является ни округленным, ни его пропорциями 1: 1, как вы можете видеть на следующем рисунке.Однако он отлично работает на Safari и Firefox.

https://ibin.co/4gvT3AAmOLRr.png

https://ibin.co/4gvTRW3jy4jD.png

У кого-нибудь есть идеи, как это исправить?Если я увеличу или увеличу поле, оно будет отображаться правильно, но я бы хотел сохранить эти размеры.Спасибо!

- ОБНОВЛЕНИЕ -

Это минимальный код, который воспроизводит ошибку для меня.

<style>
  .menu-toggle{
    display: flex;
    border: 0;
    background: transparent
  }
  .menu-toggle .dot{
    background: black;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    border:0;
    padding: 0;
    display: inline-block;
    margin: 2px
  }
</style>

<nav id="site-navigation" class="main-navigation">
  <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="dot"></span><span class="dot"></span><span class="dot"></span></button>
</nav><!-- #site-navigation -->

Кроме того, если это помогает, я использую MacBookPro (Retina, 15-дюймовый, конец 2013 г.) с NVIDIA GeForce GT 750M 2 ГБ, Intel Iris Pro 1536 МБ и внешним экраном LG 27UD88-W.Ошибка на обоих экранах.

- ОБНОВЛЕНИЕ 2 -

Это делает ту же проблему, даже если я отключаю границы-радиуса, точки нетой же ширины: https://ibin.co/4gvn4EJHniRz.png

Кроме того, я обнаружил, что если я перехожу в режим проверки и переключаю устройство, оно работает отлично.

Answer 1

Первое, что вам нужно сделать, это изменить border-radius на 50%.Если вам все еще не удается получить желаемый чистый круг, попробуйте замаскировать его одним пикселем, например:

-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

Answer 2

border-radius должно быть 50% для круглой формы.Также вам нужно убедиться, что содержимое круга не занимает места.

Как только у круга будет видимое содержимое, оно превратится в трубу (с увеличением ширины).

.dot {
    background: black;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    font-size: 0;
    display: inline-block;
    margin: 2px;
}

.wrong {
    border-radius: 100%;
}

<div class="dot"></div>
<div class="dot wrong"></div>

На самом деле я не смог воспроизвести ваш некруг, но это может быть браузер, компенсирующий вашу ошибку.