Page MenuHomePhabricator

Colored dots are not evenly spaced
Closed, ResolvedPublic

Description

  • In Mac Chrome,
  • Filter for May Have Problems.
  • Highlight May Have Problems (yellow) likely have problems (orange) and Very Likely Have Problems (red)

Results: Many edits will get colored dots of all three colors, left to right yellow, orange, red. Magnifying a screenshot shows that the yellow dots are 1 pixel closer to their neighbors than the red dots. See below.

  • Now highlight May Be Bad Faith blue.

Results: Many edits will get all four colors. Interestingly, the blue dots, now at far left, maintain the proper spacing from the yellow. But the yellow dots are still closer to the orange than the others. See below

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 23 2017, 9:35 PM

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?

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.

SBisson added a subscriber: SBisson.

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.

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

jmatazzoni closed this task as Resolved.Apr 12 2017, 1:40 AM