[ARCHIVED] Safari 14.0.1 broken images and broken files (Again)

[dslusser]

Is anyone else experiencing broken Safari images in Safari 14.0.1, and mobile iOS (14.2) Safari? I thought we had this issue fixed from Safari 13.x and iOS 13.x. Maybe it's just me? Maybe I missed an announcement about how this is a new and known issue?

Is there any way to mitigate this issue without turning off "prevent cross-site tracking?" I don't believe this to be any sort of acceptable workaround.

What, if anything is Canvas doing to fix the issue?

If this issue continues to pop up with every version bump in safari and it takes months to fix, can Safari really be considered a Canvas-supported browser? 

This has cascading issues with the desktop version of Canvas, and the official Canvas mobile Student, and Teacher apps.

[Alex1729]

I too notice this problem intermittently. I am now in the habit of checking the html code for the image. I like to see a simple, relative url for the image, that is not also complicated with

 data-api-returntype="File"

This is good: 

<img src="/courses/123456/files/6543210/preview" alt="graph.PNG" width="250" height="238" />

and this is bad:

<img src="https://uweau.instructure.com/courses/123456/files/6543210/preview" alt="graph.PNG" width="250" height="238" data-api-endpoint="https://uweau.instructure.com/api/v1/courses/123456/files/6543210" data-api-returntype="File" />

In the above examples, I made up a course-id number 123456 and image-id number 6543210

Sometimes, the bad syntax (meaning that a broken link results in some browsers) appears when copying the quiz from one course to another. I also think the data-api-returntype="File" might happen when you grab the image by linking to a course file, as opposed to using the "embed image" method. I am not sure if the broken links result from the absolute url, from the data-api-returntype, or a combination of both.

[dslusser]

That might work for some scenarios, but it doesn't specifically address my scenarios.

My issues arise when I have iframes. Because I need more advanced options in editing and creating content, I often create full, single-page "websites" and deliver them as my lessons. I create the HTML/CSS/JS content outside of Canvas, upload the "website" (aka. lesson content) to the canvas file system, then embed the iframe. Everything is created exactly to web standards with proper mock up and images reside in a child folder to the "website" folder. The issue seems to stem from the way that the images (as well as css/js files) are stored to the file systems and served. There seems to be some redirects that occur and because of this, Safari blocks the images and files. 

I'm sure I can't be the only one seeing this because this behavior can be observed in my courses, and I have also observed it happening when I have taken online classes as a student through canvas at another institution. 

My assumption is that most instructional designers don't even know it's happening because they probably only test in Chrome. This behavior is also present in the official Canvas Student and Canvas Teacher apps because they rely on Safari to render the content.

[kettlebarm]

Bumping this up because I’ve had this issue come up multiple times as we have started a new trimester.  Cross site tracking isn’t fixing it anymore.