Странное поведение с проблемой CSS border-radius

Question

У меня есть следующие html с CSS

.image_with_loader_container {
  position: relative;
  width: 100%;
  padding-bottom: 139.34426%;
  background: #dbdbdb;
}

.image_with_loader_container img {
  border-radius: 4.75%/3.5%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="image_with_loader_container">
  <img src="..." />
</div>

В этом видео (Chrome 83) вы можете видеть, что border-radius не очень хорошо работает. Вы можете проверить это поведение в режиме реального времени по адресу https://mtgprint.cardtrader.com.

Есть идеи, как решить эту проблему?

Answer 1

Вы добавляете закругленные углы к изображению, но контейнер с background: #dbdbdb; по-прежнему является прямоугольником. (Вы сможете увидеть это лучше, если установите для радиуса большое значение, например 100%). Попробуйте либо удалить этот фон, либо добавить тот же радиус границы к .image_with_loader_container.