cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
kunal_ashar
Community Participant

Why don't images embedded in an iFrame show up in the iOS app?

Jump to solution

I have a custom page that I have written using Bootstrap JS. That page loads inside an iFrame inside Canvas. Like so:

<div id="kl_custom_css"> </div>
<p><iframe id="i_frameheight" style="border: none; overflow: hidden;" src="https://student.emeritus.org/courses/187/files/107231/download" width="100%" height="1800" data-api-endpoint="https://student.emeritus.org/api/v1/courses/187/files/107231" data-api-returntype="File"></iframe></p>

Inside the page "https://student.emeritus.org/courses/187/files/107231/download", there are several images that are referenced either by relative URLs or absolute URLs. Like so, below:

266211_Clipboard01.jpg

The problem is that on the iOS version of the canvas app does not display any of these images. The images display successfully on the Android Canvas app, on the Google Chrome browser on Android, on the Safari browser on the iPhone and on the desktop browsers.

But the images don't show up in the Canvas app on the iPhone 6, 7, 8 and X.

Can anyone help shed some light on this or help with this?

Thanks in advance.

0 Kudos
1 Solution

Accepted Solutions
kunal_ashar
Community Participant

I worked around that issue by exporting/moving my images to a third-party server in the cloud (out of Canvas). I then linked those image URLs in my Canvas pages, and they all loaded correctly.

For example, when my URLs to my images were of the form:
"/folder/something/image"

or

"https://mycanvasinstance/folder/something/image"

They did not load consistently or correctly on the iPhone.

But when I changed the URLs to:

"https://mycustomcontentserver/folder/something/image"

They loaded consistently and correctly every time.

This is obviously a pretty serious bug in the Canvas mobile platform, but at this stage, I'm not sure if Canvas or my CSM would 

View solution in original post

3 Replies
rseilham
Community Coach
Community Coach

 @kunal_ashar ‌,

I looked into this and my results are very inconsistent on my iPhone X. At first I don't get the image, but If I refresh enough, the image will appear. That's not necessarily a fix, but shows the image "could" eventually show up. One thing that I noticed was that if I mixed relative and absolute links, the images showed up almost every single time. I know this isn't helpful, but thought I'd share my experience. I do know that CSS/JS, while technically supported, are tricky when using the Canvas mobile apps. My suggestion might be to reach out to your CSM or Canvas Technical Support and see if they can give you any insight or possible report this as a bug. 

Let me know if you have any luck and if I figure anything else out, I'll let you know. 

Thanks. 

kunal_ashar
Community Participant

I worked around that issue by exporting/moving my images to a third-party server in the cloud (out of Canvas). I then linked those image URLs in my Canvas pages, and they all loaded correctly.

For example, when my URLs to my images were of the form:
"/folder/something/image"

or

"https://mycanvasinstance/folder/something/image"

They did not load consistently or correctly on the iPhone.

But when I changed the URLs to:

"https://mycustomcontentserver/folder/something/image"

They loaded consistently and correctly every time.

This is obviously a pretty serious bug in the Canvas mobile platform, but at this stage, I'm not sure if Canvas or my CSM would 

View solution in original post

Thanks for sharing a fix. I still think you should report this to Canvas so it's documented. I don't think using a 3rd party server is the experience Instructure would like for you to have with Canvas.