Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Raz Getzoyan

Embedding project via iframe does not work on tablet or smartphone

Hi, I am having issues with embedding my project. It does not work on tablet or smartphone but works just fine on desktop.
 
I have a temporary work-in-progress website to host these
 
For instance on desktop, it works just fine here: https://razsite.businesscatalyst.com/roampay-x.html
 
On tablet/iPad though, it gets stuck in a loading loop (note that link must be viewed on a tablet in order to see that it doesn't work)https://razsite.businesscatalyst.com/tablet/roampay-x.html
 
Strangely enough, on my iPhone 7+ it works, but on my friends iPhone 7+ it gets stuck in the flickering/loading sequence (note that link must be viewed on a smartphone in order to see that it doesn't work)https://razsite.businesscatalyst.com/phone/roampay-x.html 
 
Is this a bug? Does not work across different devices and tested via Safari mobile, Chrome and Firefox apps
 
Thanks,
Raz

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

Sort by


Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

 Hi Raz,

I apologize for any inconvenience that this may be causing you! I appreciate you providing those in depth details about your projects in order to further investigate this issue.

I would like for a our Support team to take a closer look at this issue for you, and will open a ticket on your behalf. Please look for a message from them soon.

Have a great day,

Shaina

0

Kelly Colglazier
InVision ambassador Kelly Colglazier , ambassador
Comment actions Permalink

I'm having this problem too. Was there any resolution on this?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Kelly,

Unfortunately, we weren't able to gather more information from the user above in order to further troubleshoot this issue. That being said, I believe that this is an issue that our Support team would like to work with on.

I will be opening a ticket on your behalf with Support requesting additional information. Please look for that message soon.

Thanks,

Shaina

0

Hester Bruikman
InVision ambassador Hester Bruikman , ambassador
Comment actions Permalink

Hi Shaina,

Any updates on this issue? I'm experiencing the same problem. I'm using Embedly to add a prototype to a Qualtrics survey. On Chrome (Windows 10) and Safari (iOS 8) the screens load perfectly fine. However, I received feedback that the screen kept reloading and flickering (browser unknown) and experience the same issue when loading the screen in Brave (Windows 10).

Please let me know if there are any other details I can provide to help fix this issue.

Best,

Hester

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Hester,

After working with Kelly, our Support team was able to replicate some of the behavior she had described, seeing with the screen flickering on Safari in iOS when a prototype is embedded within an iFrame. They were able to replicate the same behavior when viewing a prototype through an iFrame in Safari, but after reloading the web page again, after visiting the share link in another Safari tab, the issue corrected itself. It looks like there is some cached entry that is not being downloaded correctly and hence the problem occurs.

The only possible workaround they were able to come across is opening your prototype share link in Safari, then opening your website in a new tab. However, I understand this is far from ideal.

That being said, I would like for our Support team to take a closer look at the individual issues that your are encountering. I will be opening a ticket on your behalf with our Support team requesting some additional information in order for them to help troubleshoot. Please look for a message requesting this information shortly.

Thanks for hanging in there,

Shaina

0

Leanne Gunn
InVision ambassador Leanne Gunn , ambassador Edited
Comment actions Permalink

Hi Shaina-- is there any update on this? Our team needs to embed an iframe onto a questionnaire that is viewed on a mobile device. 

1

Beth Vanderkolk
InVision ambassador Beth Vanderkolk , ambassador
Comment actions Permalink

Hey Leanne,

Can you describe what's happening when you attempt to embed your iframe and then view it on a mobile device?

Thanks,
Beth

0

Camila Holanda
InVision ambassador Camila Holanda , ambassador
Comment actions Permalink

Hi, I'm having the exact same issue, the prototype gets stuck in a loading loop on Safari (both ipad and mac) but not on Firefox (mac). Any updates?

1

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Camila,

Sorry to hear that you're also running into this issue. Can you please provide the following information?:

     1. How/Where are you embedding your project?
     2. Your affected browser's details which you can find here:  https://www.whatismybrowser.com/ 
     3. What model of device (e.g. iPhone 7 Plus, HTC One, etc) are you using?
     4. What version of mobile OS (e.g. iOS 10.0.1, Android 7.1.1) are you on?
     5. Are you also viewing the prototype via the native InVision Viewer app for iOS? If so, what version of the app are you using? You can find this in Settings > InVisionApp.

Look forward to hearing from you,

Shaina

0

Camila Holanda
InVision ambassador Camila Holanda , ambassador Edited
Comment actions Permalink

Hi Shaina,

1. I'm trying to implement the iframe on my own website, hosted on github pages.

2. Safari 12 on MacOS Mojave

3. Ipad Air 1 / Macbook Pro 13' 2015

4. iOS 12.1.1

5. No, I'm only viewing it on the website.

 

Hope this information can help you :)

1

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Camila,

Thank you for providing those details. I will be opening a ticket on your behalf so that our Support team can do some further troubleshooting with you. Please look for a message from our Support team soon.

Thanks for your patience,

Shaina

0

Florian Ribon
InVision ambassador Florian Ribon , ambassador
Comment actions Permalink

Hi Shaina,

 

I'm having the same problem, and I'm surprised a company like inVision can have such an important bug open for more than 10 months now.

 

The easiest way to reproduce is open a private (incognito) window in Safari 12 on MacOs 10 and display an iframe to a prototype.

For instance simply open this link with this configuration: https://jsfiddle.net/smlrolland/vtjajdxv/

 

Of course we cannot ask the visitors of our websites to visit projects.invisionapp first.

Please have this forwarded to the developers, thanks.

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Florian,

I apologize for not updating this thread sooner. It appears as if the the trouble you are having with prototype shares embedded in iFrames flickering when viewed through Safari or on certain iOS devices has been solved! Our Engineers have identified the source of the issue and a fix has been generated that corrects the issue in the latest versions of the Safari browser. Our teams have tested this here and everything is working correctly once more, so please make sure that you are at the latest version of Safari and this problem no longer occurs.

Since it sounds like you are still having issues despite this fix, can you please provide the following information?:

     1. How/Where are you embedding your project?
     2. Your affected browser's details which you can find here:  https://www.whatismybrowser.com/ 
     3. What model of device (e.g. iPhone 7 Plus, HTC One, etc) are you using?
     4. What version of mobile OS (e.g. iOS 10.0.1, Android 7.1.1) are you on?
     5. Are you also viewing the prototype via the native InVision Viewer app for iOS? If so, what version of the app are you using? You can find this in Settings > InVisionApp.

Look forward to hearing from you,

Shaina

0

Florian Ribon
InVision ambassador Florian Ribon , ambassador
Comment actions Permalink

Hi Shaina and thank you for replying.

I am using the latest version of Safari and I still have the bug when using a private window, not when I use a regular window.

You can open a private window on Safari by clicking on File > New Private Window.

Here are the information you requested (which I already mentioned in my first message)

 

1. The project is embedded using the iframe snippet provided by inVision, for instance by adding this to a HTML page:

<iframe width="424" height="916" src="//invis.io/U5574OIA3" frameborder="0" allowfullscreen></iframe>

The simplest way to reproduce is to open this link that contains the iframe: https://jsfiddle.net/smlrolland/vtjajdxv/

 

2. Safari 12.0.3 on macOS 10.14.3 **on a private Safari window**

3. Macbook Pro (15-inch, 2017)

4. Not a mobile, problem is on desktop, see 2.

5. Prototype works fine on Chrome or Safari when not using a private window. No idea about iOS, I don't have an iOs device.

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Florian,

It looks like the issues you are encountering are different from the ones originally reported and solved in this thread. Thank you for clarifying the issue that you're encountering by providing those additional details. 

That being said, I'm not seeing any similar issues yet reported and I would like for our Support team to do some further troubleshooting with you. I will open a ticket on your behalf with our Support team. Please look for a message from one of our Support agents soon.

Hope to get you some answers soon!

Best,

Shaina

0

Voskan Martirosian
InVision ambassador Voskan Martirosian , ambassador
Comment actions Permalink

Hi Shaina,

I have a similar issue in Confluence, when the screens were loading good in Confluence pages 2 days ago, but now I get a grey page with the error message 'projects.invisionapp.com refused to connect.' in it. Could you please help me to fix this? I have used a HTML Macro to insert an iframe. In that iframe, I put a public share URL from Invision project, but it still does not work.

We have a lot of projects using the same view in Confluence, so in all these cases we see grey block with error in it. It will be a huge work for us to change all these URLs. 

Hope to get an answer soon, as the Confluence pages are shared with our clients.

example of a URL which I load in confluence: https://invis.io/AMQQXMNCDS5 and I also used a full URL, it either doesn't work.

Thanks in advance,

Voskan

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Voskan,

So sorry about this issue that you're seeing when trying to view your screens in Confluence. Would you be able to send me some screenshots of where you're embedding the code, and the error message that you're now seeing?

Hope to get you some answers soon! Please feel free to reply with any other information that may be helpful in troubleshooting.

Look forward to hearing from you,

Shaina

0

Voskan Martirosian
InVision ambassador Voskan Martirosian , ambassador
Comment actions Permalink

Hi Shaina,

 

Sure I can. Here is the way we insert the code into Confluence (once more, it has been working a week ago). I have also tried to use another URL, short one, long one, embed one, nothing seems to work.

And here is the screenshot of the error after saving the page:

 

Regards,

Voskan

 

0

Tor Anders
InVision ambassador Tor Anders , ambassador
Comment actions Permalink

I have the same problem that Voskan describes. 

Regards,

Tor Anders

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Voskan and Tor,

Voskan - Thank you very much for providing that information!

When you each have a moment could you send a screenshot of what you're seeing when you try loading those projects? While you're at it, I'd also like to include the browser console in the screenshot so that we can see if there are any errors. To do this, just press ​Command + Option + J​ if you're using Chrome or Command + Option + C​ in Safari. This will open up the developer tools and it should include additional errors in there. 

After getting that, I'd also like to have you try clearing your browser's cache and cookies and reloading the page. We've seen this resolve similar issues for many customers so I'd like to give that a try.

If clearing the cache and cookies doesn't work, I would like for our Support team to troubleshoot with the affected project that is not loading.

Look forward to hearing from you,

Shaina

0

Voskan Martirosian
InVision ambassador Voskan Martirosian , ambassador
Comment actions Permalink

Yes, I cleared the cache, but it didn't help. Here is the link to the screenshot, hope it helps:

https://www.dropbox.com/s/hnlbay4u8vj7v65/4_4_Toolpage.jpg?dl=0

Regards,

Voskan

0

Tor Anders
InVision ambassador Tor Anders , ambassador
Comment actions Permalink

Cleared the cache, and it didn't have any effect. I have an error message in the browser console, see attached screenshot.

Regards,

Tor Anders

1

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Thank you both for providing that information! At this point, I would like for our Support team to take a closer look at this for you and will be opening a ticket on your behalf. Please keep an eye out for a message from one of our Support agents in your inbox soon.

Thanks for hanging in there,

Shaina

0

Jacqui Janzen
InVision ambassador Jacqui Janzen , ambassador
Comment actions Permalink

So it's September now and it looks like I also have the flickering of the iframe on Safari (desktop) and on Chrome (mobile). Has any solution been found?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Jacqui,

Sorry to hear that you're continuing to encounter this issue. In order to determine what might be causing this, can you please provide some additional information?:

  1. How/Where are you embedding your project?
  2. Your affected browser's details which you can find here:  https://www.whatismybrowser.com/ 
  3. What model of device (e.g. iPhone 7 Plus, HTC One, etc) are you using?
  4. What version of mobile OS (e.g. iOS 10.0.1, Android 7.1.1) are you on?
  5. Are you also viewing the prototype via the native InVision Viewer app for iOS? If so, what version of the app are you using? You can find this in Settings > InVisionApp.
  6. Have you tried clearing your browser's cache and cookies and reloading the page?
  7. Could you send a screenshot of what you're seeing when you try loading your project?

Look forward to hearing from you,

Shaina

0

Cecilia Landa-Avila
InVision ambassador Cecilia Landa-Avila , ambassador
Comment actions Permalink

Hello, 

I am having the same problem, we can see it on desktop, but not on mobile.

     1. How/Where are you embedding your project? : lime survey
     3. What model of device (e.g. iPhone 7 Plus, HTC One, etc) are you using?  Several, such as Pixel 2 and 3, Iphone 8-10, Samsung 9-10
     4. What version of mobile OS (e.g. iOS 10.0.1, Android 7.1.1) are you on?  Android 9-10

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Cecilia,

Sorry to hear that you're also running into these issues. In order to determine the source of the issue, we will need some of the additional information as requested above including: 

  1. Your affected browser's details which you can find here:  https://www.whatismybrowser.com/ 
  2. Have you tried clearing your browser's cache and cookies and reloading the page?
  3. Could you send a screenshot of what you're seeing when you try loading your project?
  4. Since you're encountering this on your desktop, but not mobile, can you please provide a screenshot of your "About this Mac" overview or other OS details?
  5.  Are you able to send me some screenshots of where you're embedding the code, and any error messages that you may be seeing?

Look forward to hearing from you,

Shaina

0

Cecilia Landa-Avila
InVision ambassador Cecilia Landa-Avila , ambassador
Comment actions Permalink

Hello Shaina, 

How can I contact you directly?

My problem is the same as others; I CAN see/embedded the prototype on desktop, the PROBLEM IS ON MOBILE.

1. How/Where are you embedding your project? : lime survey

2. Not useful.

3. Could you send me a direct email to contact you rather than through the public forum

4. The problem is on MOBILES

5. I don't receive any error message

 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Cecilia,

Thanks for following up. I'm sorry I misunderstood the issue initially. 

Since you would like to deal with this internally, I will open a ticket on your behalf with our Support team. Please keep an eye out for an email from one of our Support agents soon who will be able to troubleshoot with you directly.

Thanks for hanging in there,

Shaina

0

Mudit Gupta
InVision ambassador Mudit Gupta , ambassador
Comment actions Permalink

Hi,

We've been running into this problem as well and I believe I have found the source of this issue.

It's a tracking script, the page attempts to load an analytics script from api.amplitude.com using a XMLHttpRequest, which gets blocked by safari's default "Prevent Cross-Site tracking" which causes an error and leads to the thing being reloaded over and over which presents itself as screen flashes. If this really is the cause of this issue, it's unfortunate that a tracking script can cause the entire app to stop working. Any help on fixing this would be greatly appreciated.

 

-Mudit 

0

join the conversation

to comment, sign up or sign in.