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

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,output

[它在Chrome中效果很好，但是在Safari中，一旦元素变得太宽，它就会停止工作，并在右侧切割掉点。

如何使Safari无法消除点滴？

Answer 1

看起来也可以在Safari中使用。我认为这是jsbin错误。如果您在jsbin上打开html和更少的页面，则可以正常工作。