CSS border-radius animation issue on document contributors with Chrome and Edge

[SimonMarquis]

Bug description

The CSS animation on document contributor avatars is not clean on Chrome and Edge (not reproduced on Firefox.)
The border-radius: 100% that should make the avatar a circle, is not respected during the animation.

Recording.2024-04-13.233737.mp4

In the vide clip, I tried to fix it by removing the css transition directive on .md-typeset a.md-author img to show how it should behave.
But since I'm not familiar enough with CSS animation, I'm almost certain that this is not the proper fix!

Related links

• Any page where the document-contributors plugin is enabled
• src/templates/assets/stylesheets/main/components/_author.scss

Reproduction

Reproduced on any page where the document-contributors plugin is enabled

Steps to reproduce

1. Open any page of the official doc with Chrome or Edge, for example the getting started page.
2. Scroll to the end of the page
3. Hover over document contributors with your mouse
4. The CSS animation breaks the border-radius on the avatar.

Browser

Chrome, Edge, Firefox

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[katharinalisalin]

Thanks for reporting. However, you did not attach a .zip file with a minimal reproduction and therefore did not follow our bug reporting guideline. Please provide us with a minimal reproduction, and we'll be happy to take a look. Until then, I'll mark this issue as incomplete and close it for now.

[SimonMarquis]

@katharinalisalin here is a reproduction zip:

• 9.5.17-css-animation-issue.zip

And the corresponding GitHub project (needed for mkdocs-git-committers-plugin-2):

• https://github.com/SimonMarquis/mkdocs-material-7044

[squidfunk]

Thanks, we'll investigate ☺️

[squidfunk]

I've checked your reproduction and I'm not able to reproduce this on Chrome, macOS in the severity observed in your video. I confirm that it looks a little jagged, but not that bad. I think this is a browser glitch that might be happening in a specific combination of OS version and browser version. Regardless, if we apply the border radius to the image, my guess is that this should fix the problem. We need to apply it to .md-author and .md-author img then, because the first one is also used to render the +n contributor badge when there are more contributors.

Thus, this should be fixed with 851e5bb. Can you confirm?

[SimonMarquis]

LGTM, but there is still a tiny glitch.
I'm wondering if the animations are correctly synchronized, because removing the transition: filter 125ms make it very smooth (but I agree this is almost imperceptible).

Recording.2024-04-15.200546.mp4

[squidfunk]

It's definitely a glitch. If you can find a better solution, we're happy to merge it, but the fact that I cannot really observe the issue makes it quite impossible for me to fix. So we're considering this done, but are of course happy to merge a better fix by someone that can actually observe the problem 😅 And yes, I've use Chrome on macOS as you reported. Firefox doesn't have this problem – IMHO, most likely a browser synchronization glitch.

[squidfunk]

Released as part of 9.5.18.

[SimonMarquis]

Thanks for the fix. Indeed I can only reproduce the glitch on Windows, with a chromium based browser.