Почему в Chrome не отображается круг, а получается квадрат?

Question

[Diversia]

Как сделать круг в данном примере? В FireFox получается круг, в Chrome - квадрат.

https://codepen.io/dimexio/pen/zYjgvzJ

Answer 1

[Вадим]

Ну, судя по всему, у хрома давно проблемы с тенями и закруглением и это их текущая реализация - если блок маленький, то и тень будет не круглая, а со скругленными углами. Это можно увидеть если поставить промежуточное значение без анимации для вашего "круга". Из тени получится квадрат со скруглёнными углами. Если увеличивать размер круга, до хотя бы 4х пикселей по ширине и высоте, то и тень станет круглой.

Решение я тут вижу сходу пока только одно - другая реализация.

Накидал на ходу (не 1 в 1, но я думаю сможете подкрутить):

Comments

[Diversia]

Большое вам спасибо!

[historydev]

А я сижу копаюсь, а тут всё готовое уже ахах)

[Diversia]

Все хорошо, но есть одно но. Не получится вставить, чтобы слой не занимал 100x100px.

[Diversia]

например, вставить этот слой между двумя словами

[Вадим]

Diversia, Звучит очень абстрактно. Может занимать любое количество пространства в потоке, или не занимать пространства в потоке вовсе.

[Diversia]

Вадим, наверное неправильно объяснил. Т.е. в строку без переноса:
https://disk.yandex.ru/d/bA3fA5DZJNWcuw

[Вадим]

Diversia, Обновил.
но это могли уже на самом деле и сами сделать

[Diversia]

Вадим, спасибо!