How do I prevent scrolling of a host page when embedding a Figma preview iframe?

We’re using Figma’s embed previews in our documentation site. We often embed more than one preview on a page. It looks like Figma’s preview code attempts to scroll the preview iframe into view when it loads. I’m not sure why this is the default behavior, as it autoscrolls our parent page unexpectedly when it loads. Is there a way to turn this ‘feature’ off?

5 Likes

I’ve just found the same issue working on my portfolio site, this is what worked for me — I added loading=“lazy” at the beginning of the embed, and now they load when I scroll to them:

Probably kind of hacky but hope this helps you!

4 Likes

Same issue here… I tried your solution but won’t work. Anyone else any idea on that?

Hi! I’m also having this problem on my portfolio site. Did you ever find a solution? The loading=lazy method didn’t work for me either.

Same issue here, loading=“lazy” does nothing. Our documentation pages just autojump between Figma frames as they load.

Anyone find a solution yet? can’t get my page to stop loading to the iframe when clicked

I know it’s a hack, but I decided to hide it behind a button:

<script>
    let show = false;
    export let src;
</script>

{#if show}
    <iframe title="Figma prototype" style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" {src} allowfullscreen></iframe>
{:else}
	<button type="button" on:click={() => show = true}>Show</button>
{/if}

+1 having this issue, the embedded iframe is also stealing focus from our parent window which messes with our keyboard shortcuts :frowning: