背景重復：當父母變得太寬時，空間似乎停止工作

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

我也聽說過其他問題，您需要稍微更改轉換代碼，但這就是我所得到的。