I've investigated this deeper - they are all evenly spaced; this seems to be either a product of our brains making the third circle look closer to the others, or a browser bug that takes effect when the circles are small (this doesn't happen if you zoom in a bit)

I even tried switching the colors around (blue with yellow) and the effect is only there if you zoom out. I think this is either an optical illusion or an issue with the browser rendering, and honestly, a very very mild one. Does anyone actually notice this in a regular magnification?

In T161258#3151837, @Mooeypoo wrote:

I've investigated this deeper - they are all evenly spaced; this seems to be either a product of our brains making the third circle look closer to the others, or a browser bug that takes effect when the circles are small (this doesn't happen if you zoom in a bit)

Reported upstream.

In T161258#3152124, @Mattflaschen-WMF wrote:

Reported upstream.

Good one

I'm not sure what you mean by an optical illusion. I measured the spaces between dots by zooming in on the screenshots in photoshop and counting the pixels. You can see the same phenomenon in the screenshot I took yesterday (to demonstrate the issue of level overlap).

Copy the image and zoom in on it in whatever graphic program you have. You'll see something like this:

Enlarge that screenshot. As you'll clearly see (I hope) the space between the outer dots is twice the space between the inner dots.

If you zoom in with the browser before taking your screenshot you get different results, hence the idea of a browser bug or rounding effect.

We had a similar issue with the notifications blue dots that appeared slightly squared. It got fixed but I'm not sure how exactly.

In T161258#3154197, @SBisson wrote:

If you zoom in with the browser before taking your screenshot you get different results, hence the idea of a browser bug or rounding effect.

We had a similar issue with the notifications blue dots that appeared slightly squared. It got fixed but I'm not sure how exactly.

Yes, it was an issue of the ems being rounded when very small, so we changed to pixels.

You know, I think you're on to something. The circles themselves are already sized in pixels for that exact reason, but I think the margin and padding in the highlight box between the circles are in em... Changing it to pixels may solve this.

Change 346654 had a related patch set uploaded (by Mooeypoo):
[mediawiki/core@master] RCFilters UI: Use pixel instead of em for distancing the highlight dots

https://gerrit.wikimedia.org/r/346654

Change 346654 merged by jenkins-bot:
[mediawiki/core@master] RCFilters UI: Use pixel instead of em for distancing the highlight dots

https://gerrit.wikimedia.org/r/346654

Checked in betalabs - the dots are more evenly spread out.

Betalabs with the fix:

close up:

plwiki - production - the fix is not there yet.

close-up:

QA Recommendation: Resolve