Safari and Iframes

Submitted by TOBou on Thu, 09/05/2019 - 12:18
Forums: 
Installation and server related problems

So i've scowered the depths of the internet, the questions and answers on here, as well as StackOverflow. I am losing my mind here.

So I'm setting up an OER-Site with WordPress (LearnPress) and I use H5P quite frequently. It's all going pretty well even though it's all been a bit messy, including my code. But everything is working fine.

Come last friday, we do a field test and lo and behold, Safari is being Safari again. The H5P content is simply not loading on iPads using Safarie apparently. Now I don't have consistent access to an iPad to test this out correctly, but I am using a Macbook Pro with High Sierra and Safari 11.1, which is pretty similar, AFAIK.

So on Mac, I load a page with H5P-content in it. Typically it works fine on the first load. But as soon as I refresh (CMD + R; Reload button) the H5P won't load until I try a few more times. It just loads at seemingly random times. The exception is when I refresh by clicking into the address bar and hitting enter or when I manually clear the cache.

My diagnostic thus far is, that there is an issue with the iframe which is being used to load the H5P-content. I tried adding meta-tags to the iframe and main html to prevent browsers from caching. I've added random strings to the id and stuff using js. I've pretty much tried everything suggested in aforementioned depths of the internet.

It may also have something to do with the fact that the iframe is using about:blank as src. I don't quite know, where and when the content is loaded because of that. Also it makes it impossible to reload the iframe once the DOM is loaded.

I'm hoping someone around here could help me as I'm beginning to want to fly out to San Francisco to personally find the person who designed this browser.

The market share of Safari is second highest with 15% and my users are mainly university students who, for some reasons, use even more apple products, which means more Safari, so I can't simply ignore it.

 

I can provide some snippets of code or even a link if it is really needed.

Thanks in advance

Théo Bouveyron

BV52's picture

BV52

Thu, 09/05/2019 - 18:58

Hi TOBou,

Thank you for a well detailed description of the issue. Would you mind adding one additional information that can help community members to diagnose the issue, please check the browser console for any errors.

-BV52

TOBou

Mon, 09/09/2019 - 12:55

Hello BV52,

pardon my lack of answer over the last few days. I wasn't at work and had no access to any Apple device.

Here is the console log for you

[Warning] The page at https://digilehre.zflkoeln.de/lernmodule/methodik-und-didaktik/medienpae... 
was allowed to display insecure content from http://thim.staging.wpengine.com/wp-content/uploads/2015/11/logo.png.

[Log] JQMIGRATE: Migrate is installed, version 1.4.1 (jquery-migrate.min.js, line 2)
[Warning] The page at https://digilehre.zflkoeln.de/lernmodule/methodik-und-didaktik/medienpae... 
was allowed to display insecure content from http://thim.staging.wpengine.com/wp-content/uploads/2015/11/logo.png. (lernzielkontrolle-4, line 1877)

[Info] Download the Vue Devtools extension for a better development experience: (plugins.all.js, line 9050)
https://github.com/vuejs/vue-devtools
[Info] You are running Vue in development mode. (plugins.all.js, line 9059)
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
[Error] Failed to load resource: the server responded with a status of 404 () (utils.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (learnpress.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (global.js.map, line 0)

Funnyli enough the most bizarre thing here is the fact, that Safari seems to be the only browser failing to load the three js.map files. Or even requesting them for that matter. I also can't imagine, that these map files have anything to do with the issue. All the other warnings and infos are present in any browser too. That led me to believe, that there is nothing especially wrong with the code but rather the way Safari interprets iframes.

I want to add one more thing too. I looked at the console again, when the iframe with the H5P content actually loaded. The only difference, noticeable in the console at least, is the little following log snippet:

[Log] <iframe id="h5p-iframe-85-1568024847069" class="h5p-iframe h5p-initialized" data-content-id="85" style="height: 561px;" src="about:blank" frameborder="0" scrolling="no">…</iframe> (lernzielkontrolle-4, line 102)

I expect this to come up on every reload as I added a bit of code for when the page loads. It simply adds a random string of numbers, generated with the current time, to the id. I also added a console log of the iframe at the end of the code, just to confirm, that the script is actually running.

As this log message doesn't appear when the iframe won't load correctly, it leads me to assume that the order of operations is wrong. Or at the very least, that my randomized string is put in too late, so we may as well discard that.

Although it is interesting that either my code isn't being run properly or safari is doing something very weird with the iframe that leads to the code not being able to console.log the thing.

It's a bit confusing to write all my thoughts down, I hope it is understandable.

Either way I thank you for your help

-TOBou

TOBou

Mon, 09/16/2019 - 12:44

Hello BV52,

pardon my lack of answer over the last few days. I wasn't at work and had no access to any Apple device.

Here is the console log for you

[Warning] The page at https://digilehre.zflkoeln.de/lernmodule/methodik-und-didaktik/medienpae... 
was allowed to display insecure content from http://thim.staging.wpengine.com/wp-content/uploads/2015/11/logo.png.

[Log] JQMIGRATE: Migrate is installed, version 1.4.1 (jquery-migrate.min.js, line 2)
[Warning] The page at https://digilehre.zflkoeln.de/lernmodule/methodik-und-didaktik/medienpae... 
was allowed to display insecure content from http://thim.staging.wpengine.com/wp-content/uploads/2015/11/logo.png. (lernzielkontrolle-4, line 1877)

[Info] Download the Vue Devtools extension for a better development experience: (plugins.all.js, line 9050)
https://github.com/vuejs/vue-devtools
[Info] You are running Vue in development mode. (plugins.all.js, line 9059)
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
[Error] Failed to load resource: the server responded with a status of 404 () (utils.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (learnpress.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (global.js.map, line 0)

Funnyli enough the most bizarre thing here is the fact, that Safari seems to be the only browser failing to load the three js.map files. Or even requesting them for that matter. I also can't imagine, that these map files have anything to do with the issue. All the other warnings and infos are present in any browser too. That led me to believe, that there is nothing especially wrong with the code but rather the way Safari interprets iframes.

I want to add one more thing too. I looked at the console again, when the iframe with the H5P content actually loaded. The only difference, noticeable in the console at least, is the little following log snippet:

[Log] <iframe id="h5p-iframe-85-1568024847069" class="h5p-iframe h5p-initialized" data-content-id="85" style="height: 561px;" src="about:blank" frameborder="0" scrolling="no">…</iframe> (lernzielkontrolle-4, line 102)

I expect this to come up on every reload as I added a bit of code for when the page loads. It simply adds a random string of numbers, generated with the current time, to the id. I also added a console log of the iframe at the end of the code, just to confirm, that the script is actually running.

As this log message doesn't appear when the iframe won't load correctly, it leads me to assume that the order of operations is wrong. Or at the very least, that my randomized string is put in too late, so we may as well discard that.

Although it is interesting that either my code isn't being run properly or safari is doing something very weird with the iframe that leads to the code not being able to console.log the thing.

It's a bit confusing to write all my thoughts down, I hope it is understandable.

Either way I thank you for your help

-TOBou