Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Member

Avatars distorted in assignment comments

When making a comment in Speedgrader, the avatar is distorted when the comment is longer than a single line.

317460_distorted avatar.png

In the Canvas guides, the image shows that the avatar retains proper proportions when the comment is longer than a single line.

317461_non-distorted avatar.jpg

Is there something we can do so our avatars stay in proportion?

Tags (2)
6 Replies
Community Member

Which browser and operating system are you using?

I am not seeing this with Chrome or Firefox on a PC, the avatars for multiple line comments are all normally sized. This is true for people who have a photo and as well as the default avatar.

Have you tried clearing your browser's cache (Shift-Ctrl-Delete), forcing a refresh of the page, or trying a different browser (especially if you're using Internet Explorer or Edge)? You may also want to check for system updates and apply any that are available, I've had weirdness happen when Windows is waiting to update.

If the problem persists, you may need to report this as a ticket to Canvas. Click on Help and choose "Report a problem." They can see more details, including the page you're on where the problem happens, than we can here in the community.

Community Member

I see it. It's in Speedgrader, with the dual windows, and the comments at the bottom. I was orginally looking in Marks. The funniest bit is how you get longer and longer. They have put the image in the same container as the comments! #codefail  317848_Screen Shot 2019-07-23 at 2.01.40 pm.png

Thanks James

The avatars are distorted in speedgrader on every assignment I have looked at on every computer I have ever used, and on all versions of firefox, chrome, edge and internet explorer since early 2017.  (I haven't tried safari Smiley Happy).

We will raise a ticket with Canvas.

Your comment in the screen shot says that this was done with "Anon grader." That might be the key since anonymous grading might affect the way avatars are displayed -- even for those that aren't anonymous like the teacher's comments.

Another possibility is that it is a Turnitin assignment and that is doing something to the CSS. 

Yet another possibility is that your institution has done something with the CSS to override the styling.

We do not have Turnitin to test, I don't have any anonymously graded assignments, and we don't override the CSS, so I cannot verify exactly what is going on.

You mentioned code fail and putting the image in the same container as the comment, which suggests you know how to go in and inspect the DOM. Can you check the CSS for the image that's stretching? If you don't know, here's how to do it in Chrome: mouse over the stretched avatar, click the right mouse button, and choose inspect.

Here's what I'm getting without anonymous grading turned on. The height and width are both fixed at 24px, which is consistent with my images staying the same.


I'm looking for something other than "#comments .comment .avatar" or for a line to be drawn through the "height" line.

Unless your institution has overridden the CSS, it seems this should be reported to Canvas support as a bug. Although you're certainly not required to do debugging, I find that the more you can narrow it down, the easier it will be for them. Otherwise, they tend to come back with "Can you make a screenshot or video so we can see what you're talking about?" I would definitely mention the anonymous grading and the turnitin assignment unless you can eliminate one of those.

Hi James,

thanks for your investigation and hints:

It happens with all kinds of assignments (not just Turnitin, but any files, Arc videos, etc)

It happens whether or not anon grading is on.

I think your suggestion re the CSS is probably spot on.

You might check and see if the CSS is overridden before contacting Canvas support. If the height line is crossed out or it something other than "speed_grader..." as the source, then that might indicate local changes.