[bug] Broken emoji width in WebKit browsers (Safari) #295

New issue

Open

opened 2023-04-03 15:46:18 +00:00 by helene · 3 comments

helene commented

2023-04-03 15:46:18 +00:00

Version

I don't run it but I notice it on ihba's FE and others

What were you trying to do?

N/A

What did you expect to happen?

What actually happened?

Introduced by #284. No idea how to fix it, besides reverting. Also brought up by #291. Running Safari 16.3 on macOS Ventura 13.2.1 (basically latest Safari

Safari sets the width of the emoji to the width of the image, and does not size it based on its width/height ratio and the actual height given.

Removing the width: 100%; rule on .still-image img seems to fix it, but I have no way of checking if that breaks wide emoji.

Severity

I can manage

Have you searched for this issue?

I have double-checked and have not found this issue mentioned anywhere.

### Version I don't run it but I notice it on ihba's FE and others ### What were you trying to do? N/A ### What did you expect to happen? ![image](/attachments/50d94471-70fe-4235-a9c1-f5e1554ceb8a) ### What actually happened? ![image](https://akkoma.dev/AkkomaGang/akkoma-fe/attachments/4530f826-cc15-4c1a-87ab-298fb9700ec1) Introduced by #284. No idea how to fix it, besides reverting. Also brought up by #291. Running Safari 16.3 on macOS Ventura 13.2.1 (basically latest Safari Safari sets the width of the emoji to the width of the image, and does not size it based on its width/height ratio and the actual height given. Removing the `width: 100%;` rule on `.still-image img` seems to fix it, but I have no way of checking if that breaks wide emoji. ### Severity I can manage ### Have you searched for this issue? - [ ] I have double-checked and have not found this issue mentioned anywhere.

image.png

316 KiB

Mergan added the

Bug

label 2023-04-12 00:33:05 +00:00

SukinoVerse commented

2023-05-07 12:47:47 +00:00

Contributor

This issue is very annoying. I hope it gets more focus.

Every iOS browser is WebKit based, so we cannot avoid this issue for people who use iOS.

This issue is very annoying. I hope it gets more focus. Every iOS browser is WebKit based, so we cannot avoid this issue for people who use iOS.

floatingghost commented

2023-05-07 12:58:37 +00:00

Owner

patches welcome

👍 1

SukinoVerse commented

2023-07-03 11:18:47 +00:00

Contributor

@floatingghost @helene Can we just re-open PR #291 and merge?

I try it locally, only adding width: var(--emoji-size, 32px); to .emoji solved this issue.

I got many complains from instance users regarding this.

For instance admin, the interim solution is add this to custom.css on your frontend

.emoji > img {
        width: auto !important;
}

@floatingghost @helene Can we just re-open PR https://akkoma.dev/AkkomaGang/akkoma-fe/pulls/291 and merge? I try it locally, only adding `width: var(--emoji-size, 32px);` to `.emoji` solved this issue. I got many complains from instance users regarding this. For instance admin, the interim solution is add this to `custom.css` on your frontend ```css .emoji > img { width: auto !important; } ```