Quiz interactive content not displaying in Safari

Hi

I recently inherited an LMS site  which is experiencing an error when displaying H5P quizzes in Safari.

The iframe comes back as empty, with no apparent errors in the console, and no apparent related PHP errors.

For now we are directing users to Chrome etc.

Details

  1. Safari on iOS and Mac OS. Quizzes do not appear on the page. Cannot replicate this error using browserstack. Can replicate this error using a standard iPad or desktop Mac. Tracked back to Maven on Browserstack, unable to replicate.
  2. WordPress 5.5.2
  3. Mobile or Desktop: Both
  4. Browser: Safari only
  5. H5P plugin version 1.13.1
  6. H5P content type and version: I think Question Set v1.13.4. https://firstaidforall.co.nz any quiz in any course
  7. Any browser console errors: No (Safari 10 errors on a let variable in hp5.js, but lets put that aside)
  8. PHP errors: No
  9. Just empty iframe where quiz should be (collapsed with empty content)
  10. Any recent changes to the environment: not entirely sure - new client.
  11. Any recent changes to the browser you're using: Not aware of anything specific.

H5P content not available from client at this time.

Regards

Nic

BV52's picture

Hi Nic,

Thank you for reporting this. Would you mind providing us a temporary access to one of the courses so that we can also check. So far after checking using multiple environments (H5P.org, H5P.com, Moodle, Drupal and Wordpress) Question Set is working on Safari on my end.

-BV52

Hi

I can forward a username and password?

I have been experienting with switching the Tawk (live chat) facility off, and I believe there might be a conflict of some kind there - or that the Tawk iframes are delivered in the same way and experiencing the same issue. I also believe caching might have something to do with it. You you have recommended browser caching settings, for example?

This would explain the emulator working, I suspect.

What is clear that with Tawk off, the content appears but only on a hard refresh - the back button, for example, will result in an empty iframe.

Regards
Nic

BV52's picture

Hi Nic,

You can send the username/pword to my e-mail address [email protected]. You might be correct with your diagnosis but let's check what I will see on my side.

-BV52

Hi
I've been debugging through an ipad and Safari. When the content doesn't load, I do see the initialized class being added to the iframe, however, the head and body of the content is delivered without content and the iframe itself remains styled with a height of 1px.
An error occurs on the resize event (H5P.js around line 353 odd) when this happens.
What I would like to do is set a timeout, and initiate a reload if the content is empty. A manual reload invariably works, but I can't ask the user to do this.
There is a risk of the user being caught in a loop, but if done correctly, only the iframe will be attempting the reload and hopefully the user won't notice.
Is there an H5P method we can hook to to cause this to happen (we are now using the xAPI as well)?

Nic