Why does avatar height not fit bar?

Question

Hi

When users upload avatars to their profile on my website, the avatars do not fit the bar. The height of the avatar is wrong. Here is an example:

Is there a way to get around this bug?

Thanks!

Bo.

Comments

1. What is the image size? Can you attach it to the question?
2. Do you think it should shrink or be cut?
3. What browser are you using?

---

I found a fix to it - something like sama55 describes in his answer further down the page. Thanks anyway!

Answer 1

Probably, it is bug of Snow theme.

.qa-logged-in-avatar .qa-avatar-image {

max-width: 100%;

height: auto;

/* min-width: 24px; <<< */

/* min-height: 24px; <<< */

}

Answer 2

The issue with sama's approach is that it brings back a kind of flickering when the avatar is loaded.

I believe this should be fixed as I explained in this similar question: http://www.question2answer.org/qa/32547/bug-user-avatar-height-exceeded-navi-bar

Please, report back if both, the size and the pushing of the components issues get fixed with my proposal (I got the other answer accepted but not actual feedback on both issues getting fixed). Thanks.

Comments

I got it (There was another problem). I cannot confirm phenomenon about flicking (blinking?) that you think problem with Chrome.

My question about fliking:
Q1: Is it a problem depending on specific browser?
Q2: Is it a problem depending on specific theme (Snow)?
Q3: Does only avatar on top bar of Snow flick?

I do not really make code yet. However, there may be other modifications.

If Q3 is yes, you may modify logged_in() in qa-theme.php of Snow.
If Q3 is no, you may modify qa_get_external_avatar_html() / qa_get_user_avatar_html() in core.

Either method appoints minimum size by in-line CSS dynamically. However, if problem is solved by timing when browser draw avatar and apply "style sheet", this method may be ineffective. It will be necessary to confirm this point by test with several browser.

Is this work of Jatin?

---

Hey sama. My bad. The original issue is not exactly a flickering. It is just the image not having the space it will take reserved before it appears. This results in the image not taking any space and suddenly appearing and pushing everything to the right. I guess you could reproduce this in qa 1.6.2 because I submitted the pull request by the end of december.

So to answer your questions I have to resort to my memory:

Q1: No. I think I found it on Chrome and FF as well.
Q2: From the 3 themes provided in the default install Snow is the only one showing the avatar in the login bar. So I'd answer with a Yes.
Q3: Good question. Yes. The other ones do not get that class qa-logged-in-avatar applied.

The core handles the size properly on its own by setting it to the image itself. I don't think there is any need of changing/overriding that in the theme. That is why it works on the rest of the avatars: they are not affected by this style.

I made a quick test on IE 11, FF 29 and Chrome 35. Both issues seem to be fixed with this. I've already sent the pull request with this change for Scott/Gideon to also test it. Although I have already tagged Jatin in the pull request, I guess he will not keep maintaining Snow v1.3 and, IMO, Q2A v1.7 will be released with Snow 1.4.

If we also take into account that, against my wishes, Q2A 1.6.4 will never be released, it makes sense to conclude that submitting this to github could be pointless but still I had that personal debt to clear :)

---

Thanks for your detailed report. I was able to understand well. I remembered that avatar blinks in old days. And, at the same time, there might be issue of display performance of blob image. Gid improved the display performance of the image then. As result, that issue might be solved by there. I think that removing two lines of upper CSS is no problem.