背景重复：当父母变得太宽时，空间似乎停止工作

Question

我一直在研究background-repeat的space值和round值。 从理论上讲，这应该意味着我可以使用径向渐变在元素上创建漂亮的虚线边框，而不会切断圆点。

.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 不切断点？

编辑：这已被苹果公司提出。

Answer 1

看起来您需要在代码中包含兼容的转换。

.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;
}

我也听说过其他问题，您需要稍微更改转换代码，但这就是我所得到的。