Повторение фона: пространство перестает работать, когда родитель становится слишком широким - PullRequest
Новая
       48

Повторение фона: пространство перестает работать, когда родитель становится слишком широким

6 голосов
/ 15 октября 2019

Я играл с space и round значениями для background-repeat. Теоретически это должно означать, что я могу использовать радиальный градиент, чтобы создать красивую пунктирную границу элемента без обрезания точек. 

.test {
  background-repeat: space no-repeat;
  background-size: 20px 10px;
  background-image: radial-gradient(circle closest-side, red calc(100% - 1px), transparent 100%);
  transition: background-image 0.5s linear;
  padding-bottom: 10px !important;
  background-position: left top;
  resize: both;
  overflow: auto;
  border: 2px solid;
  padding: 20px; 
  width: 310px;
}

https://jsbin.com/momiwokena/1/edit?css,output

Это прекрасно работает в Chrome, но в Safari, когда элемент становится слишком широким, он перестает работать, что приводит к обрезанию точек с правой стороны.

Как сделать так, чтобы Safari не обрезал точки?

РЕДАКТИРОВАТЬ: Эта проблема была поднята в Apple.

...