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.js doesn't always extend embeds height #22109

Closed
hodgesmr opened this issue Dec 7, 2022 · 0 comments · Fixed by #22141
Closed

/embed.js doesn't always extend embeds height #22109

hodgesmr opened this issue Dec 7, 2022 · 0 comments · Fixed by #22141
Labels
bug Something isn't working

Comments

@hodgesmr
Copy link
Contributor

hodgesmr commented Dec 7, 2022 •
edited

Steps to reproduce the problem

  1. Copy embed code (e.g. <iframe src="https://mastodon.social/@MattHodges/109297573695122961/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe><script src="https://static-cdn.mastodon.social/embed.js" async="async"></script>)
  2. Write to HTML, Open in a browser

Expected behaviour

embed.js expands height, we can see full content

Actual behaviour

Example of error:

Screen Shot 2022-12-06 at 5 55 59 PM

Detailed description

This smells like a race condition. If I put a breakpoint, wait for a few seconds, and then remove it and proceed, the heights expand properly.
Screen Shot 2022-12-06 at 6 00 13 PM

Example HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            background-color: #292c36;
            font-family: "Arial", sans-serif;
        }

        div#container {
            margin: auto;
            max-width: 640px;
            padding: 10px;
            text-align: center;
        }

        div.post {
            margin-top: 20px;
        }

        a.home-link {
            color: white;
        }

        a.original-link {
            color: white;
        }

        span.link-divider {
            color: white;
        }

        iframe.mastodon-embed {
            max-width: 100%;
            border: 0;
        }
    </style>

    <script src="https://static-cdn.mastodon.social/embed.js" async="async"></script>

</head>

<body>
    <div id="container">

        <div class="post">
            <a class="home-link" href="https://mastodon.social/@ktboldy@mastodonapp.uk/109462532866227215"
                target="_blank">Home Link</a>
            <span class="link-divider"> | </span>
            <a class="original-link" href="https://mastodonapp.uk/@ktboldy/109462532889785980" target="_blank">Original
                Link</a>
            <br />
            <iframe src="https://mastodonapp.uk/@ktboldy/109462532889785980/embed" class="mastodon-embed"
                allowfullscreen="allowfullscreen" width="400"></iframe>
        </div>

        <div class="post">
            <a class="home-link" href="https://mastodon.social/@chrismessina@mastodon.xyz/109468858607903211"
                target="_blank">Home Link</a>
            <span class="link-divider"> | </span>
            <a class="original-link" href="https://mastodon.xyz/@chrismessina/109468858198913500"
                target="_blank">Original Link</a>
            <br />
            <iframe src="https://mastodon.xyz/@chrismessina/109468858198913500/embed" class="mastodon-embed"
                allowfullscreen="allowfullscreen" width="400"></iframe>
        </div>



    </div>
</body>

</html>

Specifications

Mastodon 4.0.2
Firefox 107.0.1
Chrome 108.0.5359.94
@hodgesmr hodgesmr added the bug Something isn't working label Dec 7, 2022
@hodgesmr hodgesmr mentioned this issue Dec 7, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Embed js height fix hodgesmr/mastodon
1 participant
@hodgesmr