Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Embed Note was cut at bottom #14766

Open
1 task
tassoman opened this issue Oct 14, 2024 · 6 comments
Open
1 task

Embed Note was cut at bottom #14766

tassoman opened this issue Oct 14, 2024 · 6 comments
Labels
⚠️bug? This might be a bug

Comments

@tassoman
Copy link
Contributor

💡 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
@tassoman tassoman added the ⚠️bug? This might be a bug label Oct 14, 2024
@kakkokari-gtyih
Copy link
Contributor

Seems working fine from my environment...

image

@kakkokari-gtyih
Copy link
Contributor

kakkokari-gtyih commented Oct 15, 2024 •
edited
Loading

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
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor

kakkokari-gtyih commented Oct 17, 2024 •
edited
Loading

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
Copy link
Contributor Author

tassoman commented Oct 17, 2024 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
⚠️bug? This might be a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tassoman @kakkokari-gtyih