Not a bug Minor Avatar Bug?

MapleOne

Well-known member
Affected version
All versions
On a lot of the Xenforo boards I visit I notice even if I use a round avatar it will put a quirky white ring around the avatar.

Screenshot (6).png
This board

Screenshot (5).png
Another board


Screenshot (4).png
So on my new tweeter board I made the admin avatar the exact same colour as the tab.
Looks nice right?


Screenshot (3).png
Except when I come from admin or at random it will still put a white ring until I refresh the page.



So not that it is really a bug but as you can see in the first and second picture it just looks kind of unfinished and blurry when members se a full or blurry white ring around the avatar in the top bar.
 
Are you sure that's not your avatar itself? Your avatar has a round maple leaf that doesn't extend to the edges of the image. So when the radius of the image is changes to make it round, you would have a white border around it (since the red part doesn't extend to the edge.

My avatar here:

1637771633656.png


The raw version of your avatar doesn't extend the red part to the edges of the images (as I mentioned):
 
Also in the "tr" case it is exactly the same color as the tab and the white only appears sometimes like when I am in admin and come back to the site or at random. When I refresh the page the withe goes away on the tr avatar.

Theoretically the white should never appear on the tr avatar and whatever technical reason it does on the others I understand because maybe how smooth the edges are or something.

It was a small little thing where I thought I could get rid of it by color matching the avatar and it works most of the time, except when it glitches.
 
For the second one (the glossy rounded one), I'd guess that's ultimately a browser issue that has to do with anti-aliasing and how browsers handle pixel sizes that aren't integers. Like if you are wanting to "cut out" a circle exactly at the edge of the circle in the original image, and the source image is antialiased to have a white background (where anti-aliasing is blending the edges to the background) like so:
1637773871466.webp
You end up with pixels that are white(ish) along the edges because the background of the image is white.

Normally you could use a transparent background so the circle could be antialiased and blended with transparency instead of white. Unfortunately, I believe XenForo converts avatars to JPEG images which don't support transparency.

Your best bet would be to have an avatar that is fully square and then let XenForo handle making it circular with the border-radius. Fundamentally the issue is you are trying to make it circular yourself and then XenForo makes it circular again, but along the way you are dealing with the anti-aliasing from you trying to do it yourself.
 
Your best bet would be to have an avatar that is fully square and then let XenForo handle making it circular with the border-radius. Fundamentally the issue is you are trying to make it circular yourself and then XenForo makes it circular again, but along the way you are dealing with the anti-aliasing from you trying to do it yourself.

That is exactly what I did with this one

avatar5-png.260819



And that gives me this

screenshot-4-png.260809



Except when it glitches



screenshot-3-png.260810



Most of the time it display correctly but every so often the white boarder reappears until I refresh.
 
Ya, not sure on that one, but seems like that would be a browser bug. Have you tried with different browsers to see if it's specific to just one browser (or one engine like WebKit)?
 
Back
Top Bottom