Embed Note was cut at bottom

misskey-dev / misskey

🌎 A completely free and open interplanetary microblogging platform 🚀

https://misskey-hub.net/

GNU Affero General Public License v3.0

9.97k stars 1.35k forks source link

Embed Note was cut at bottom #14766

Open tassoman opened 4 days ago

tassoman commented 4 days ago

💡 Summary

I tried to embed a note on my website, but iframe got cut at bottom line

🥰 Expected Behavior

Can't say if it's an issue of iframe embed or kind of messup with website CSS. BTW, I expected website CSS didn't influenced iframe content.

🤬 Actual Behavior

immagine

📝 Steps to Reproduce

No response

💻 Frontend Environment

* Model and OS of the device(s): Windows PC
* Browser: Firefox and Edge
* Server URL: misskey.social
* Misskey: 2024.10.0 
* Website: tassoman.com

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service: docker
* Misskey: 2024.10.0
* OS and Architecture: docker compose

Do you want to address this bug yourself?

[ ] Yes, I will patch the bug myself and send a pull request

kakkokari-gtyih commented 4 days ago

Seems working fine from my environment...

kakkokari-gtyih commented 4 days ago

It is possible that your website is (intentionally) loading slower, and that causes the Misskey embed to complete loading faster than the parent website itself and not firing the height adjust function as it should.

Removing defer from the script tag might be fix this issue

tassoman commented 3 days ago

Well, yes loading bandwidth is slowed on purpose. But I've put embed.js javascript inside <head> area, so it should come before <body> rendering. Now I fixed adding 40px to iframe's height. Embed code tool made me cut and paste a stylesheet having height:300px.

Maybe iframe embed code shouldn't have fixed height stylesheet. Height should be calculated by javascript, it depends on Note's length.

kakkokari-gtyih commented 3 days ago

Removing defer from the script tag might be fix this issue

Did you try this? If this solves the problem, I'll strip the defer from the generated code

kakkokari-gtyih commented 1 day ago

Maybe iframe embed code shouldn't have fixed height stylesheet.

This will be overwritten by embed.js, so height is actually calculated by Javascript (Fixed 300px is for splash screen and this will prevent content shift in the initial load)

tassoman commented 1 day ago

Looks like I got it working as expected. I've put <script> at end of html file, I also removed defer attribute. In the end, I also removed other thing messing CSS. Now looks like clean.