Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[client] Fix avatar sizing on Chrome & Safari #872

Merged
merged 1 commit into from
May 14, 2022

Conversation

BBaoVanC
Copy link
Contributor

@BBaoVanC BBaoVanC commented May 9, 2022

Before this change, on Chrome and Safari (but not Firefox), the svg inside .isso-avatar has a size of 0 by 0 pixels. Not sure why it worked on Firefox, but this makes sense because svg's have no native size, and since there was no minimum size specified, it defaulted to 0.

Instead of just setting width to 48px, I set it to 100% and left max-width set to 48px. It should be better practice this way.

I am wondering if setting height is a good idea, since it seems to have no effect. I kept it in just because it's clearer.

Before (demo on Chromium)

the avatar image is seemingly blank as it has a size of zero pixels

After

the avatar is displayed properly, with a size of 48x48 px

@ix5 ix5 added client (Javascript) client code and CSS bug labels May 14, 2022
@ix5 ix5 added this to the 0.13 milestone May 14, 2022
@ix5 ix5 merged commit 668882f into isso-comments:master May 14, 2022
@ix5
Copy link
Member

ix5 commented May 14, 2022

As for tests, I have tried getting my hands dirty with puppeteer-based screenshots and comparisons to snapshot png files via imagemagick compare.
E.g. compare -metric AE -fuzz 5% -highlight-color White -lowlight-color Black isso-thread-prev.png isso-thread-new.png x: or simply by comparing image signatures without metadata via identify -quiet -format "%#" {image1,image2}.png

@BBaoVanC BBaoVanC deleted the fix-avatar-sizing branch May 14, 2022 20:10
@ghost
Copy link

ghost commented Feb 3, 2023

I'm experiencing this issue on firefox/chrome on Linux with the latest isso running on Docker.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug client (Javascript) client code and CSS
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants