[ARCHIVED] Uploaded images no longer function in Safari

[cwoodruf]

Uploading and embedding images in Canvas during last academic term worked fine...

[Addendum: Following suggestion from browser guide, I tried using in a Safari "private window." That workaround revealed the images. I've cleared cache and history, and the problem in a normal window remains.]

Now, the images I had uploaded into the course images folder no longer appear--in the desktop Safari environment (ver. 13.1). They are working on the Canvas iPhone app and in desktop Firefox (ver. 74) browser. This is true for courses successfully run last term AND courses I'm creating for the term that starts next week.

I have cleared desktop Safari's history and cache. Here's what I'm seeing"

• Course home page banner:

• Embed images window showing the icon. Note the images that came in with the template import are fine. They also embed just fine if I choose to use those instead. It's just the images I uploaded into the Canvas course that are unavailable--though they USED to be.

• And here's what it looks like when I go to the Files course images folder. The two images with blank thumbnails are images I uploaded. Again, this is true for course I created last quarter AND for this coming quarter.

Any guidance on this will be helpful as I create content and assessment for music that are image intensive!

[Stef_retired · Accepted solution]

Thanks to everyone who has commented here thus far. If you haven't already, would each of you please submit tickets to Canvas Support? How do I get help with Canvas as an instructor?‌ provides general instructions, but if your school has provided its own pathway to support, please used that to initiate the case. Having as many cases as possible to inspect will make it easier for our support team to investigate and address this.

[seddonc · Accepted solution]

Hello All,

I have the same issue. I have figured out a workaround:

Disable "Prevent cross-site tracking" in Safari preferences.

I believe the issues is that uploaded images in Canvas are technically posted on a different site (and have very long complex urls). I think this is being interpreted by Safari as "cross-site" tracking. I will submit a ticket with this information.

[John_Bradshaw]

Perhaps alerting your end-users to the problem with a convenient workaround is a step in the right direction.

[Linkletter]

I wonder how many millions of people are experiencing this bug, and when it will be fixed. Safari shouldn't be considered a supported browser until this is resolved.

[lisa_fishburn]

Hi this looks to be working today has it been resolved? 

[michellemeazell]

Seeing the problem still today -- I guess I should just make sure to tell our faculty to use Chrome but how is it 2020 and we have a browser compatibility issue like this? 

[uwe_zimmermann]

...and how comes that we don't get any information or update from Instructure in this matter?

[may027]

Sorry to say that just today my colleague reported a student was not seeing some images (just a generic icon indicating a graphic) and the student is using...Chrome.

[Linkletter]

I have never seen anything like this. I am very concerned for the state of Instructure and Canvas. This will begin to affect Google Chrome next month. Hopefully the 100+ people at Instructure that recently lost their jobs were not the ones working on this.

[rgibson1]

This is what happens when private equity companies insert themselves into tech. Ruin it every. stinkin. time.

[Linkletter]

Either they are not testing beta releases of browsers, or the testers raising it are being ignored by leadership. Literally millions of people are being affected by this months-long Canvas bug, and we can't even get a one sentence update. I fear for Quality Assurance under Instructure's new private equity owners.

[james_peth]

This only affects me when using Canvas, nothing else. When the web developer suggests you use another browser, this is when you know that the web developer is the problem. Compatibility is not the user's responsibility. Fix your application.

[John_Bradshaw]

In addition to the images not showing problem, I am now noticing students getting "stalls" when opening pages for assessments (e.g., quizzes) while in Chrome.

Lately, Canvas has been a hot mess.

[k_wrightson]

Thank you for this - very helpful. Hopefully the Canvas Team will be able to fix so we can turn cross tracking protection on again. 

[may027]

The recent Safari update to 13.1.2 does not change the situation: images in quizzes are still not visible unless the "prevent cross-site tracking" option is unchecked. However, I am happy to say I can now leave this option checked and access the Kaltura My Media content (previously, that also required unchecking the tracking option).

FYI.

[garrett_william]

After the recent update to MacOS 10.15.6 and Safari 13.1.2, I am no longer able to view images embedded on various Canvas pages. Their file icons however do show up in the Files menu correctly. Why my Media Menu image still renders in the example below is beyond me. Everything works fine in Chrome. 

I learned a long time ago to uncheck the "prevent cross-site tracking" setting when using Canvas. Contrary to what is stated on this thread, this has been an ongoing issue for Safari Canvas users. It is one of the first errors I encountered using the platform. As of right now, unchecking this setting no longer resolves the issue for me. I have tried clearing history/cache, removing website data and repairing disk permissions and running other maintenance scripts. Nothing remedies the situation.

It does baffle me that the same company that built out a pretty robust community experience has so many issues implementing features that are similar on the Canvas side. Search, tagging, image rendering, the forum editing and posting system for the Community are all first class and work great. Everything also renders correctly without fail on Safari. Go figure . . .

[trose1]

Yes, it appears to have broken again. This ongoing issue indicates that Instructure may not be keeping up with browsers and OS's. This is concerning. A few months ago, Support was unable to troubleshoot a Canvas Studio issue that I was having on the current version of MacOS (which had been released eight months prior).

[bill_stewart]

Garrett,

I'm experiencing what you're describing.  Perfect explanation.

I'm hoping a fix gets implemented soon.

[jessicae]

I am having this issue (with latest version of Mac OS and Safari) and unchecking "Prevent cross-site tracking" doesn't fix it, even with cache and history cleared, and browser closed and opened again. Please fix this soon, as the Student Tour repeated pop-up problem on Firefox prevents me from using that browser.

[suzanne_r_david]

We are seeing the same issue (Mac, Safari, images not showing even with cross-site tracking and cleared data), but ONLY for images that were uploaded before a specific date. I haven't narrowed down the date so far, but it is sometime in late summer/early fall 2018. Images uploaded before that don't display, and ones uploaded after do. The only fix is to download or otherwise find the images and re-upload and re-insert them. For our more image-intensive courses, this just isn't feasible.

Best,

Suzanne

[jessicae]

Thanks for the info Suzanne.

I'm a student not a teacher so presumably they uploaded those particular images before the 'cut off' date. It also means I can't re-upload and re-insert, but I can make do with downloading.

[John_Bradshaw]

Things I'm seeing in Canvas as of 8/16/2020...

Browser	Operating System	Results
Safari (v13.1.2)	macOS 10.15.6	Safari will drop images (e.g., pages, profile photos, quizzes, etc.) but not consistently, it makes no difference if "Prevent cross-site tracking" is off; text showing in browser window will sometimes be missing in print copy (PDF or otherwise). Sign out, Clear Cache, Quit, Relaunch, Sign-in doesn't help.
Edge (Chromium) Version 84.0.522.59	macOS 10.15.6	Images will show but are slow to load; print copy is does not show backgrounds/shading (e.g., tables, headings, etc.). Sign out, Clear Cache, Quit, Relaunch, Sign-in doesn't help.

[JHobson1]

I am having this problem. I spent an hour waiting for help from tech support, it seemed to help to clear the cache, and then the problem started again.

[hardinm]

I am still having this issue on both my macbook and ipad. I did the "solution." I am unsure what to do next. I am on hold with tech support.

[csato]

Hi there, I posted this update on Monday (8/17). It might be buried in the replies of this post though. 

Update (8/17): The bug fix deployed to Canvas production resolved the majority of issues for images not displaying in Safari. In some cases, images are still not appearing in Canvas and our Canvas engineers are aware of these cases and are working on a solution. gulick_24, (thank you for sharing) in this thread, has provided solutions for this issue as a work-around until a bug fix is deployed into production. Additionally, if these work-around solutions do not solve the experience, we recommend using Chrome or Firefox browsers. Images are being displayed in those browsers.

[SAJL]

@csato

Since this is an ongoing issue, despite the 8/13 or 8/17 deploy, should the problem specifically be detailed on the recommended browsers page and Safari removed from the recommended browsers until it's actually fixed? While there is already a note about Safari with downloads and chat on the recommended browsers page, with the cross-tracking solution (which is not actually a solution/does not work) and the issues are likely connected, the casual user would not know this.

Additionally, is there a way to unflag this post as solved, since it isn't?

[csato]

@SAJL We are adding additional information on our recommended browsers page. We won't be removing Safari as a recommend browser but will add additional information in the note below the list of support browsers. 

I'll be working with our community team to also get this marked as unsolved. 

Thanks

[milesl]

@csato can you clarify which workaround you're referring to?

I disabled cross-site tracking as recommended in @gulick_24 's post, but that did not resolve the issue.

[csato]

If disabling the cross-site tracking still does not resolve the issue, I recommend using a different browser until this bug is resolved. I apologize about the inconvenience this has caused. 

[watsonnk]

Thanks, it would be good if this could be fixed asap; disabling cross-site tracking is not the ideal solution anyway because that feature cannot be easily controlled per domain, only globally (and also, the cross-site tracking is provided for a good reason). Changing browser is also not ideal as a workaround.

[SAJL]

@csato Sorry to reply twice to your threads, but want to make sure it's recognized as a current and ongoing issue since this was reported at my institution by a developer and is reproducible on Safari 13.1 but not 13.0.

Since this is an ongoing issue, despite the 8/13 or 8/17 deploy, should the problem specifically be detailed on the recommended browsers page and Safari removed from the recommended browsers until it's actually fixed? While there is already a note about Safari with downloads and chat on the recommended browsers page, with the cross-tracking solution (which is not actually a solution/does not work) and the issues are likely connected, the casual user would not know this.

Additionally, is there a way to unflag this post as solved, since it isn't?

[kdolan1]

Hi, unchecking the Disable cross site listing in Safari did not work for me. I opened the page with inspector and added a solidus (forward slash) to the image source and then Safari loaded the image, no problems. Not sure why the trailing solidus (forward slash) would fix the CORS issue for Safari. 

Also, open a Safari new private window and the images load. But, reload the page and get the broken image links and CORS error.

A third oddity, is that pasting that image snippet into a different host webpage works to load the image. But, pasting it into the webpage of the same host gets the CORS error.

For example:

Take this html image that links to a Canvas image
<img src="https://cidilabs.instructure.com/courses/3/files/190725/preview?123" data-api-returntype="File" class="broken-image">

Go to this page, open it in inspector, paste in the image link in the body area, and the image shows. Then, edit param on the src to verify that reloading the image also works:
https://www.instructure.com

Go to this link, open it in inspector, paste in that image link above in the body area, and the image is a broken link with the CORS error.
https://cidilabs.instructure.com/courses/3/pages/upload-slash-embed-image-test

[Renee_Carney]

Please follow What are the browser and computer requirements for... - Canvas Community 

Note: Safari 13.1 contains an update that may cause issues with downloading files and chat alerts in Canvas. Canvas engineers are currently working on a solution for this issue. Until then, you may avoid errors with files and alerts by disabling cross-site tracking prevention in Safari when using Canvas. If disabling cross-site tracking doesn't resolve these issues, please try one of the other supported browsers.

[gulick_24]

Thanks, except that when we go to that link and read that "Canvas engineers are currently working on a solution for this issue." ...that's not an actual solution, so it's not really solved yet.

[nfurlow]

This is not working for me, nor my students. Being that a major portion of faculty and students use Macs (and Safari) I would think this would be a priority for you.  I don't have this issue with your competitors. @Renee_Carney

[watsonnk]

Hello,

  Just wondering if there was any timescale for this being fixed? Current solution is to change browser as the other suggestions do not, only straightforward workaround is to bulk download/reupload older images to the course in question.

best regards,

         Nigel W.

[kdolan1]

The disable cross-site tracking does not appear to be related to this issue. Is someone able to verify that they can toggle the CORS error, on and off, for the image src from this site, by toggling that Safari preference param? https://cidilabs.instructure.com/courses/3/pages/upload-slash-embed-image-test?

I wonder if the Safari issue with image src, is related to this comment on a [workaround] for the Edge browser (i.e. forceEdgeToDownloadNewResourceSoItHasAccessControlAllowOriginHeader) https://github.com/instructure/canvas-lms/blob/2647f5cc44491758f3744ff8e05ddcc793a28efb/app/jsx/canv...

[EDIT] never mind about the Edge workaround, it adds a param to the end of the URL to force a download with the correct CORS headers. Adding the param is known NOT to work for this image src issue. Adding the trailing backslash on the URL path (before the params) works for image.

I'll test loading the image source as a content URL vs "src" attribute, to see if the issue is really hyper specific to the HTTP image media element src attribute. 

[ish06]

I am not sure if a solution was put in place but I am able to see pictures in safari again, however I am not able to submit files now.

[EDIT] also I am not able to send messages in the canvas page (even though it says sent). I have to log into my school academic email to send a message to my instructors. 

[kdolan1]

Hi, I'm going to make a separate ticket for the CORS image S3 redirect header cached header check issue with the details about the error, as show  in Safari, and soon to be seen in FF & Chrome, for the preFlight Check CORS issue for cached redirect related images.

[kdolan1]

Hi Instructure, the following curl  checked Access-Control-Allow-Methods for instructure-uploads.s3.amazonaws.com as recommended in AWS S3 ticket referenced below. The OPTIONS method is not listed as one of the accepted methods. Please, can you verify that the Safari preflight OPTIONS method is allowed on https://instructure-uploads.s3.amazonaws.com?

Access-Control-Allow-Methods: GET, PUT, POST, OPTIONS

$ curl -H "origin: any" -v "https://instructure-uploads.s3.amazonaws.com"

> GET / HTTP/1.1
> Host: instructure-uploads.s3.amazonaws.com

< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, PUT, POST
< Access-Control-Max-Age: 3000
< Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
< x-amz-bucket-region: us-east-1
< Server: AmazonS3

"By default, CloudFront allows only the GET and HEAD methods, but some web browsers [i.e. Safari] might issue requests for the OPTIONS method."

The CloudFront distribution's cache behavior allows the OPTIONS method for HTTP requests

If you're still seeing errors after you update your CORS policy and forward the appropriate headers, try allowing the OPTIONS HTTP method in your distribution's cache behavior. By default, CloudFront allows only the GET and HEAD methods, but some web browsers might issue requests for the OPTIONS method.

To enable the OPTIONS method on your CloudFront distribution, follow these steps:

1. Open your distribution from the CloudFront console.
2. Choose the Behaviors tab.
3. Choose Create Behavior, or choose an existing behavior, and then choose Edit.
4. For Allowed HTTP Methods, select GET, HEAD, OPTIONS.

https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

 

[david_turk]

Jumping in with a "me too" the disabling "Prevent cross-site tracking" didn't work for me.

Sub'd

[pennedav]

I just got hit with this issue again. Re-uploading the images seemed to resolve the issue, but I don't consider that to be a valid solution since it requires to touch every single case of this manually. Canvas needs to fix this. Definitely seems like a cross-origin issue. That was the error I saw in the Safari developer tools. Sadly did not screenshot it and I'm not sure how to replicate the issue once it's been resolved. If I encounter this again I'll remember to screenshot and submit a ticket, but this time I was under time pressure to just get it fixed. 🙂