[Bug] Page scrolls automatically on top when including learnGitBranching into an iframe HTML tag and clicking on it

[andrewpap22]

Hi there 👋

Thank you for this amazing project! It's the main resource of me learning git and it was a really amazing experience! So again thank you deeply.

The Bug 🐛

I recently found out a bug, when including learnGitBranching into an <iframe> tag. The bug is that, when you click anywhere inside the <iframe> itself it makes the page scoll automatically a bit upwards making it kinda unusable inside the <iframe>

The code 💻

<div style="
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;">
        <iframe src="https://learngitbranching.js.org/" allow="fullscreen"
        style="
        position: absolute;
        top: 0;
        left: 0;
        border: 0;
        width: 100%;
        height: 100%;"></iframe>
</div>

To reproduce ⌨️

A demonstration of this can be found here on my 👉 Blog Post Scroll down until you find the iframe and try to play with it and see what happens.

[pcottle]

Ah yes, I see what you mean:

Sadly I think it would be pretty hard to make learn git branching usable in such a small iframe embed. We even have issues on the main site when you make the window super small, so some of this is just some fundamental size limits our code assumes.

I also noticed that the upward scroll only happens for certain clicks (not all of them) which was a bit surprising.

It seems like there are ways to detect if you're in an iframe: https://stackoverflow.com/questions/326069/how-to-identify-if-a-webpage-is-being-loaded-inside-an-iframe-or-directly-into-t

so we could try to customize some of the logic, but I'm not sure I want to undertake the endeavor to get embeds working properly (and maintain that going forward).

Thanks for dropping by though! If you get inspired by it, feel free to submit a PR

[andrewpap22]

Hello,

I do thank you for replying! I will try to experiment a bit with it and do make a PR if I manage anything, when I'll get some free time!