Round Avatars Issue

For support and discussion related to templates and themes in phpBB 3.3.
User avatar
ChinaGal
Registered User
Posts: 176
Joined: Fri Jan 24, 2020 10:02 am

Round Avatars Issue

Post by ChinaGal »

We are using the border-radius: 50%; code in order to make member avatars round on our site. I noticed though that we are getting these very small slivers of white appear on all 4 sides of the avatars. You can see the issue in the attached screen shot of an avatar. I have played with the border-radius code and changed the percentage, but it seem to make no difference.

If you have any idea what is causing these white slivers to appear on the avatar I would much appreciate knowing. Many thanks.

Avatar.jpeg
Last edited by ChinaGal on Fri Apr 03, 2020 8:52 pm, edited 1 time in total.
User avatar
Mannix_
Registered User
Posts: 803
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: Round Avatars Issue

Post by Mannix_ »

do you have a border applied to it ?
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.2.x etc. contact me here or here.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
ChinaGal
Registered User
Posts: 176
Joined: Fri Jan 24, 2020 10:02 am

Re: Round Avatars Issue

Post by ChinaGal »

Yes, we have: border: 1px solid #fff;

But I already tried changing the border to 0px earlier, refreshed the cache, and it didn't solve the problem it seems.

UPDATE:

I just tried removing the border: 1px solid #fff; code completely, refreshed the cache, and still the same. White lines still there.
User avatar
3Di
Former Team Member
Posts: 15668
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Round Avatars Issue

Post by 3Di »

Try adding background-color: transparent; or post that CSS class.
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
:studio_microphone: Looking for a specific feature or alternative option?
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: Round Avatars Issue

Post by Gumboots »

I've seen that happen (had it the other day on a test site) but I don't know what causes it. Suggestion: you could try an inset box=shadow and see if that covers the slivers. IOW, instead of your original border you'd use:

Code: Select all

.whatever {
box-shadow: inset 0 0 0 1px #fff;
}
That should give an even 1px inside the image.
User avatar
ChinaGal
Registered User
Posts: 176
Joined: Fri Jan 24, 2020 10:02 am

Re: Round Avatars Issue

Post by ChinaGal »

3Di wrote:
Fri Apr 03, 2020 7:41 pm
Try adding background-color: transparent; or post that CSS class.
Thank you. I tried replacing border: 1px solid #fff; with background-color: transparent; and it had no effect.

Here is the full CSS class:

Code: Select all

lastpostavatar img {
	border: 1px solid #fff;
	display: inline-block;
	margin-right: 4px;
	float: left;
User avatar
ChinaGal
Registered User
Posts: 176
Joined: Fri Jan 24, 2020 10:02 am

Re: Round Avatars Issue

Post by ChinaGal »

Gumboots wrote:
Fri Apr 03, 2020 7:44 pm
I've seen that happen (had it the other day on a test site) but I don't know what causes it. Suggestion: you could try an inset box=shadow and see if that covers the slivers. IOW, instead of your original border you'd use:

Code: Select all

.whatever {
box-shadow: inset 0 0 0 1px #fff;
}
That should give an even 1px inside the image.
Thank you. I tried replacing border: 1px solid #fff; with box-shadow: inset 0 0 0 1px #fff; and it did add the 1px border around the image as you said, but you can still see those 4 white areas around the avatar. Maybe if you increased the shadow to 2px or 3px it would cover up the white lines, but it isn't what we really want to do as a solution.
User avatar
Mannix_
Registered User
Posts: 803
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: Round Avatars Issue

Post by Mannix_ »

You know we could help you better with a link and also instead of using border-radius you should think of using clip-path . :)
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.2.x etc. contact me here or here.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
david63
Registered User
Posts: 17950
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Contact:

Re: Round Avatars Issue

Post by david63 »

Why not use the Round Avatars extension?
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored
User avatar
ChinaGal
Registered User
Posts: 176
Joined: Fri Jan 24, 2020 10:02 am

Re: Round Avatars Issue

Post by ChinaGal »

Mannix_ wrote:
Sat Apr 04, 2020 9:06 am
You know we could help you better with a link and also instead of using border-radius you should think of using clip-path . :)
Before we had clip-path and someone said border-radius was better so we switched. I will switch back and see if that fixes it. Thanks.

UPDATE:

We tried clip-path: circle(); and it no longer makes the avatars round at all. Our CSS editor also gives an error message saying "clip-path" is an unknown property.
Last edited by ChinaGal on Sat Apr 04, 2020 10:09 am, edited 2 times in total.
User avatar
ChinaGal
Registered User
Posts: 176
Joined: Fri Jan 24, 2020 10:02 am

Re: Round Avatars Issue

Post by ChinaGal »

david63 wrote:
Sat Apr 04, 2020 9:09 am
Why not use the Round Avatars extension?
We have that installed too, but we have customized it so that it doesn't effect avatars within topics on desktops, we have customized it so that it only effects avatars on mobile devices. So we are using both Round Avatars and Avatars on Last Post extensions together.
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: Round Avatars Issue

Post by Gumboots »

Ok, since this is getting tricky anyway...

You have the anchor around your avatar image (a.avatar) and you can set an ::after pseudo element on that. This can be absolute positioned above the actual avatar and can be sized to match it (top: 0; right: 0; bottom: 0; left: 0;). The pseudo can then be styled to hide the nasty slivers, by setting a border of whatever colour and of any suitable width. You can make it match the surrounding background or you can make it a distinct border, as you please. You can also use it in combination with the box-shadow trick if you need two things: one to hide a sliver and one to give a visible border.

ETA: code tested live on this site (via in-browser overrides).

Code: Select all

  /* Trial of avatar shenanigans. */
  .avatar-container>a {
    position: relative;
  }  
  .avatar-container>a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    border-radius: 50%;
    border: 2px solid red;
    box-shadow: inset 0 0 0 2px green;
  }    
  .avatar-container img {
    border-radius: 50%;
  }
If it still gives you trouble, a direct link to the problem would be handy. As would a list of which browsers the problem appears in.
User avatar
ChinaGal
Registered User
Posts: 176
Joined: Fri Jan 24, 2020 10:02 am

Re: Round Avatars Issue

Post by ChinaGal »

Thank you for the code, but I am still trying to figure out why this might be happening in the first place. If we are able to fix the underlying problem then we wouldn't need to add extra borders to sort it out I believe, correct? We are also wondering if this is a glitch of some sort in the core code or is it more likely something to do with a coding error we made somewhere? Thank you again.
User avatar
Mannix_
Registered User
Posts: 803
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: Round Avatars Issue

Post by Mannix_ »

Guys we are going nowhere. ChinaGal can you provide as with a link so we can check what is going on our self because right now it's one big guessing game :)
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.2.x etc. contact me here or here.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Gumboots
Registered User
Posts: 330
Joined: Fri Oct 11, 2019 1:59 am

Re: Round Avatars Issue

Post by Gumboots »

ChinaGal wrote:
Sun Apr 05, 2020 5:55 am
Thank you for the code, but I am still trying to figure out why this might be happening in the first place. If we are able to fix the underlying problem then we wouldn't need to add extra borders to sort it out I believe, correct? We are also wondering if this is a glitch of some sort in the core code or is it more likely something to do with a coding error we made somewhere? Thank you again.
Given that the test site I saw it on the other day was running custom pages in pure HTML, I very much doubt the problem is related to phpBB as such. However, for some weird reason that test site is apparently no longer displaying this problem, and at the moment I'm not sure how to reproduce it. I'll play around with it a bit and see if I can come up with anything. I agree there appears to be a fundamental problem, and sorting this out would be better than workarounds if it is possible.

The core issue is likely to be something to do with background colour and/or padding, but this is currently just a guess.

I also agree with Mannix that it is high time you gave us a direct link to a live example of your problem. That would be most helpful. If you provide a direct link to a live example of the problem, any of us can immediately try a range of options on top of your actual code.
Post Reply

Return to “[3.3.x] Styles Support & Discussion”