0

Если навести на круг курсор и сделать в браузере масштаб 80%, то круг при вращении не ровный.

span{
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px dotted red;
  border-radius: 50%;
}
span:hover{
  animation: spin 1s infinite linear;
}
@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}
<span></span>

https://jsfiddle.net/xcpLemot/

как это можно исправить? т.е. чтобы при вращении круг был ровный
В хроме масштаб выбирается кликнув в верхнем правом углу на точки.

4
  • интересно, если сделать ширину границы один пиксель - все ок
    – Grundy
    30 авг 2017 в 12:33
  • если не убирая hover уменьшить до 75, а потом вернуть на 80, то тоже все ок. Но вообще, я не вижу смысла в решении этой "проблемы", да и не уверен, что решение есть. 30 авг 2017 в 12:36
  • Баг это, возникает только при масштабировании, так что смысла фиксить то и нет. Оно(масштабирование) всегда как-то странно работает. 30 авг 2017 в 12:38
  • ок, благодарю, мне нужно было ваше мнение на счет этого бага
    – word
    30 авг 2017 в 17:59

1 ответ 1

0

Как вариант, можно сделать так:

div{
  padding: 2px;
  display: inline-flex;
}
span{
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px dotted red;
  border-radius: 50%;
}
div:hover{
  animation: spin 1s infinite linear;
}
@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}
<div><span></span></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.