Background-repeat: space seems to stop working when parent gets too wide

Question

I've been playing around with space and round values for background-repeat. In theory this should mean I can use a radial gradient to create a nice dotted border on an element without the dots being cut off.

.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

It works nicely in Chrome, but in Safari once the element gets too wide it stops working resulting in cut off dots on the right hand side.

How can I make Safari not cut off the dots?

EDIT: This has been raised with Apple.

Seems like you should report this to the Safari folks. I tried with svg background and still it was getting cut off, so definitely looks like a bug in their background-repeat implementation. — Vishal Biswas, Oct 26 '19 at 16:48
Raised with Apple - https://feedbackassistant.apple.com/feedback/7420231 — SpaceBeers, Oct 31 '19 at 15:18
Hi! I don't have installed Safari. But it exists some metatags that could help in some situations rendering content in Safari. Could you try with this? " " — Jason Glez, Oct 31 '19 at 16:27
@SpaceBeers what version do you use? Did you try with the portable version I used? — Amessihel, Nov 01 '19 at 10:02

FuryRex09 · Answer 1 · 2022-05-01T00:24:42.960

It looks as if you need to include compatible transitions in the code.

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

I've heard of other problems too where you need to change the transition code a little but this is what I've gotten.

Background-repeat: space seems to stop working when parent gets too wide

1 Answers1