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

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

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

What actually happened?

image

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.
316 KiB
Mergan added the
Bug
label 2023-04-12 00:33:05 +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.

patches welcome

patches welcome
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; } ```
Sign in to join this conversation.
No Milestone
No project
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: AkkomaGang/akkoma-fe#295
No description provided.