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

Question

我一直在玩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，输出

它在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;
}

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