Shields: several official badges provided by their vendors have style problems

[tooomm]

It looks like AppVeyor and Gitter changed their official badges to be flat-squared and no longer in the flat design with rounded edges, our default design.
The official Greenkeeper badge is also squared (but the design is off!).

Does anyone knows why? Should we adopt if there is a movement starting...?

Examples:

• (from https://www.appveyor.com/docs/status-badges)
• (from http://blog.gitter.im/2014/01/27/badgers, but svg version!)

[RedSparr0w]

The examples you posted are still showing as flat style for me, I personally prefer the flat-square style myself but I feel the flat style should probably stay as the default for now.

[espadrine]

We created the flat and flat squared styles roughly at the same time. Back then (2014 IIRC), I ran a month-long popularity contest to determine which to use by default, and the flat style won. I kept the squared style because there was still significant use.

I don't recommend changing the default style, since it would change the way badges look for a large number of users, which may dissatisfy them.

[tooomm]

The examples you posted are still showing as flat style for me

For me they don't anymore (on Windows 10 with Firefox 57):

Funny, they display normal on Chromium... all other badges I see around didn't change though.
Other "broken" examples on Firefox are these with squared edges:
and

I don't recommend changing the default style

Sure, nobody wants to change it out of randomness.

I just wanted to raise awareness and start a discussion about it, because I realized the mentioned change for some big + popular services.
But it seems to be a specific handling in Firefox. Is it Windows only? Any idea what could cause this?

[chris48s]

Don't think its a firefox thing. Here's a screen grab from Firefox on Ubuntu:

Looking at the 2 screen grabs side-by-side, I note that the GitHub issue text is being rendered in different fonts as well. Maybe a strange suggestion, but is it possible that the way those badges are rendered is partly dependent on the available fonts?

[RedSparr0w]

Looks like they are using an outdated badge template, as the corners aren't rounded properly on iOS.
This was fixed in https://github.com/badges/shields/commit/78494dd6ffd9e3cab3fe1909f4bc3e030ed68e2c#diff-69fc5b6566a6c401101b7c2178302f54

GreenKeeper: _(appveyor and the others mentioned all look the same)_

shields.io:

[paulmelnikow]

Ooh, good catch.

Would someone like to reach out to Greenkeeper and Gitter to let them know?

[paulmelnikow]

We still have those popularity stats! I wonder where flat-square is in relationship to flat.

[tooomm]

Would someone like to reach out to Greenkeeper and Gitter to let them know?

AppVeyor and codecov show the same style problems on firefox. Don't know about others.
Maybe they have the same style issues due to an outdated teamplate and not properly rounded corners as @RedSparr0w pointed out for greenkeeper?

[RedSparr0w]

@tooomm Yeah from what i can see all the ones you have mentioned in this thread all have the same issue.

• AppVeyor
• Codecov
• Greenkeeper
• Gitter

Not too sure of any other services hosting shields.io style badges that may also be using the old layout.

[tooomm]

Besides Greenkeeper we have our own version for all of them.

The official Travis badge seems ok by the way.

[RedSparr0w]

The Travis badge never seemed to have this problem #732
They are rounding all the corners using rx="3" and then fixing the left of the right hand side with an extra <path>
heres how the badge looks without the extra <path>

[espadrine]

They are rounding all the corners using rx="3" and then fixing the left of the right hand side with an extra

That sounds exactly like a trick I had on badges before.

[paulmelnikow]

Not sure there's any action for us to take here.

[tooomm]

I think this can be closed maybe, a the example badges are showing fine for me now.
Probably a browser thing as described in https://github.com/badges/shields/issues/1363#issuecomment-351342004.

Or did they manage to update their badge templates? @RedSparr0w

[RedSparr0w]

Still seems to be a problem on iOS 9 & iOS 12.

But agree this should be closed, as not a lot we can do about this.