当父元素变得太宽时，背景重复:空格似乎停止工作

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

编辑：已经向Apple提出了此问题。

- SpaceBeers

---

看起来你应该向 Safari 开发团队报告此问题。我尝试使用SVG背景，但仍然被裁剪了，所以肯定是他们的background-repeat实现中存在错误。 - Vishal Biswas

适用于 Portable Opera 版本 64.0.3417.83。 - Amessihel

Raised with Apple - https://feedbackassistant.apple.com/feedback/7420231 - SpaceBeers

更新了二进制文件，但没有任何变化。 - SpaceBeers

@SpaceBeers，你用的是哪个版本？你试过我用的便携版吗？ - Amessihel

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

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

- FuryRex09