Aggamotto not working for IOS mobile devices

Submitted by ShravanBhavyata on Mon, 12/20/2021 - 13:39
Forums: 
Bugs in content types

I've been creating H5P content for a while now and there exists some conflict with some of the H5P content types with IOS devices. Especially audio type content but as I tried "Aggamotto" recently I came to know that even this content type portrays problems with IOS mobile devices. I'm pretty sure of this state as I develop and check all the H5P content on my Mac systems once developed. And when I finished developing a demo type for aggamotto the section where it was supposed to display the data was pitch black.

I don't know what went wrong with this one as all other visual content types work well. I even tried to switch browsers on the iPhones for testing thinking it might not be compatible with safari but that wasn't the case as the same issues were seen on chrome.

I'd like to know what exactly caused this problem to occur. Also, how can I resolve this issue and use "Aggamotto" without any strain?

Below are the screenshots of Android and iPhone screens to display the visual presentation of the situation.

Android Screen: 

Android Screenshot

 

iPhone Screenshot:

iPhone Screenshot

Content types: 
Agamotto
otacke's picture

otacke

Mon, 12/20/2021 - 19:33

Especially audio type content but as I tried "Aggamotto" recently I came to know that even this content type portrays problems with IOS mobile devices. I'm pretty sure of this state as I develop and check all the H5P content on my Mac systems once developed.

Unfortunately, what you are doing here is like posting a picture of a car and asking why it's not driving. That's why there's a list of things one should add to a bug report at the top of the H5P bug report forum. Please provide as much of the requested information as possible.

I nevertheless just ran the Agamotto demo content on iOS12 to iOS15 ranging across iPhone 11 Pro, iPhone 12, iPhone 13 Pro, a 2015 iPod Touch and an iPad Pro 9.7 with iOS11. All fine.

I even tried to switch browsers on the iPhones for testing thinking it might not be compatible with safari but that wasn't the case as the same issues were seen on chrome.

Apple forces other browser vendors to use the webkit engine on iOS, so in the end, all of them (Chrome on iOS, Firefox on iOS, ...) use Safari's engine with all its flaws. So you can choose whatever browser you want on iOS, you'll get the same render engine related problems. So if there's an issue, it's likely that it is iOS related.

I'd like to know what exactly caused this problem to occur.

Me too, but without further information I won't be able to help.

Cheers,
Oliver

ShravanBhavyata

Tue, 12/21/2021 - 06:36

Can you please mention what exactly you need in regards to information? As I've already given all the details about the problem that I'm facing currently.

Even so, if you need to study a detailed matter and test it along. Here is the iframe of the aggamotto :

 

<iframe src="https://learn.bhavyata.com/wp-admin/admin-ajax.php?action=h5p_embed&id=48" width="847" height="1012" frameborder="0" allowfullscreen="allowfullscreen" title="Assessment for Course Evaluation"></iframe><script src="https://learn.bhavyata.com/wp-content/plugins/h5p/h5p-php-library/js/h5p..." charset="UTF-8"></script>

 

Please see to it and help me out of it.

 

otacke's picture

otacke

Tue, 12/21/2021 - 12:37

Hi ShravanBhavyata!

If you revisit the page listing all the things that are requested for bug reports, you'll noticed that you had in fact NOT provided all the information that might be relevant, e.g. browser version and OS version, etc - e.g. now a link to the H5P content instance.

I can see the issue on your site. It seems that for whatever reason there the image cannot be rendered to the canvas properly. Don't know why.

Cheers,
Oliver

ShravanBhavyata

Tue, 12/21/2021 - 06:52

I've already mentioned all the details regarding the problem mentioned above. If you still need something to research and pinpoint the issue out of it for that I'm embedding an iframe code to help you out for studying the case I'm facing here. 

Hope this will help us both out. 

<iframe src="https://learn.bhavyata.com/wp-admin/admin-ajax.php?action=h5p_embed&id=48" width="847" height="1012" frameborder="0" allowfullscreen="allowfullscreen" title="Assessment for Course Evaluation"></iframe><script src="https://learn.bhavyata.com/wp-content/plugins/h5p/h5p-php-library/js/h5p..." charset="UTF-8"></script>

Thank you!

BV52's picture

BV52

Tue, 12/21/2021 - 12:56

Hi ShravanBhavyata,

Just to add to what Oliver mentioned:

  1. Detailed steps to reproduce the bug (exactly how and when did it happen): Details above
  2. Platform and version number. Wordpress (based on the link) version?
  3. Mobile
  4. Browser: Chrome and Safari version?
  5. H5P plugin version
  6. H5P content type and version (if a content type was used), and a sample URL or attached H5P.: Provided above
  7. Any browser console errors
  8. Any PHP errors
  9. Screenshots if it's a visual problem: Provided above

If it worked before

  1. Any recent changes to the environment (new plugins/modules, updates, configuration changes etc.)
  2. Any recent changes to the browser you're using (new extensions, updates etc.)

-BV

otacke's picture

otacke

Tue, 12/21/2021 - 13:18

Hi all!

I have investigated the issue. It is a limitation of Safari on iOS (or any other webkit enforced browser on iOS, see above) that other browsers do not have: The technique that Agamotto needs to use requires images on iOS to have a maximum size of 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.

You will have to scale down your images if they are supposed to work on iOS.

Best,
Oliver

ShravanBhavyata

Thu, 05/12/2022 - 07:14

I really appreciate your efforts on the thread I'll try out doing the same and notify you whether the solution provided works. And I'm sorry for creating a fuss about providing all the information when in reality I just ignored the standards of providing one for bugs report.

Thankyou!