Background-repeat: space seems to stop working when parent gets too wide

Question

I've been playing around with space and round values for background-repeat . In theory this should mean I can use a radial gradient to create a nice dotted border on an element without the dots being cut off.

.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

It works nicely in Chrome, but in Safari once the element gets too wide it stops working resulting in cut off dots on the right hand side.

How can I make Safari not cut off the dots?

EDIT: This has been raised with Apple.

Answer 1

It looks as if you need to include compatible transitions in the code.

.test {
  background-repeat: space no-repeat;
  background-size: 20px 10px;
  background-image: radial-gradient(circle closest-side, red calc(100% - 1px), transparent 100%);
  -webkit-transition: background-image 0.5s linear; /* Safari */
  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;
}

I've heard of other problems too where you need to change the transition code a little but this is what I've gotten.