Copy link to clipboard
Copied
I just noticed that when I open a page on Adobe Portfolio with embedded XD prototype, the scrollbar will automatically scroll to the location of the prototype.
Is this a bug? Thanks!
I already connected with them. This is a bug and they will investigate it, but there is no timeframe for when it will be fixed.. Let's see
Thank you so much Nancy
UPDATE - March 10, 2020
This solution will only work outside of Adobe Porfolio due to embed code stripping enforced by Adobe.
Original Post:
An easy solution for this is to sandbox the XD iframe. Add the following line to your iframe embed code:
sandbox="allow-same-origin allow-forms allow-scripts"
The full embed code should look something like this:
<iframe width="375" height="667" src="https://xd.adobe.com/embed/.../" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-forms allow
...
Copy link to clipboard
Copied
Not too sure what you mean. Can you post the URL to an example?
Copy link to clipboard
Copied
Sure here is an example
Copy link to clipboard
Copied
That XD embed is certainly grabbing page focus isn't it?
I haven't seen that before.
Contact Portfolio Team directly and ask them what's up.
Copy link to clipboard
Copied
I already connected with them. This is a bug and they will investigate it, but there is no timeframe for when it will be fixed.. Let's see
Thank you so much Nancy
Copy link to clipboard
Copied
Hi Nancy, this is NOT an issue only existing in Adobe Portfolio. Every website embedded XD prototype will encounter this issue, for example, check this website: https://www.appdesigntips.com/blog/sharing-your-adobe-xd-prototypes-on-your-blog-or-website/
I believe that is an issue related to <iframe> but I can't fix it by myself by adding attributes like "scrolling="yes"". Please contact XD technical team :[
Copy link to clipboard
Copied
I'm experiencing the same problem here.
I had to remove the XD prototype from my website because it scoll down the page on loading
Copy link to clipboard
Copied
Having the same issue with an embedded XD prototype on a Webflow page. I can see that it's loading after everything else, but why it's automatically scrolling down to the container section is beyond me.
Copy link to clipboard
Copied
I have the same issue here, just commenteting to up the priority on this! Thanks for looking into it as it has a pretty significant impact on my websites functionality. Thanks,
Chandler
Copy link to clipboard
Copied
Just commenting to bring up the importance of the issue. I had the same problem on my site. It happens in Firefox, Chrome, and Edge.
There is a post on Stack Overflow about it: https://stackoverflow.com/questions/36775412/prevent-page-to-jumping-to-iframe/36775563#36775563 for a temporary fix. I can't use that because I don't have full access to backend code on my site.
Copy link to clipboard
Copied
UPDATE - March 10, 2020
This solution will only work outside of Adobe Porfolio due to embed code stripping enforced by Adobe.
Original Post:
An easy solution for this is to sandbox the XD iframe. Add the following line to your iframe embed code:
sandbox="allow-same-origin allow-forms allow-scripts"
The full embed code should look something like this:
<iframe width="375" height="667" src="https://xd.adobe.com/embed/.../" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
Copy link to clipboard
Copied
I'm experiencing the same thing when I embed my XD protoype on wordpress (using elementor pro). The browser jumps to the iframe instead of staying at the header. It works fine on safari but does that on my android browser and on chrome. I just tried this fix but it didn't work.. Am I doing something wrong with it? Thanks!
Copy link to clipboard
Copied
It doesn't work for me at all. When I check the embed code window after adding the sandbox tag above, the tag disappeared. I guess it means the tag doesn't work on Adobe Portfolio.
+) I tried this on Safari, it works! But not on Chrome.
Copy link to clipboard
Copied
Doesn't work for me on a React website.
@adobe this is really annoying and makes me — thereby Adobe — look unprofessional.
Please fix.
Copy link to clipboard
Copied
Can you share a link? It should work outside of an Adobe site.
Copy link to clipboard
Copied
This didn't work for me... Has it worked for anyone else?
Copy link to clipboard
Copied
It didn't work for me either allow-scripts causes the page to jump, but nothing loads without it
Copy link to clipboard
Copied
Doesn't work on adobe portfolio
Copy link to clipboard
Copied
Addig Sandbox line not working for me - Adobe removes in on saving.
Is there any other fix for this?
iFrame is stealing focus for me on my portfolio.
Copy link to clipboard
Copied
Is there any other advice as to how to get around this in Adobe Portfolio?
Really want to be able to embed prototypes in my portfolio without focus snapping to the iFrame at the bottom.
Thanks.