misskey-dev
Embed Note was cut at bottom
💡 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
📝 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
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
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.
Removing
deferfrom 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
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)
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.