Hint pop-ups do not work in fullscreen mode

One of our JAPN language instructors reported an issue with H5P such that hint popups don't work in full-screen mode. For example: <iframe src="https://h5p.open.ubc.ca/wp-admin/admin-ajax.php?action=h5p_embed&id=3507" width="948" height="558" frameborder="0" allowfullscreen="allowfullscreen" title="L5.1-3.ii Adjectives Review and Practice"></iframe><script src="https://h5p.open.ubc.ca/wp-content/plugins/h5p/h5p-php-library/js/h5p-re..." charset="UTF-8"></script>The hints on slides 6, 7, 8, 10, 12 work in regular view, but in full screen the icon is clickable but doesn't show the hint.  We replicated the issue in other Canvas courses and tested in another browser with Firefox and Safari and the same problem occurs.  We tested the H5P exercise in Canvas and Wordpress and the same issue persists. We also made a new H5P exercise using comments and the same issue happens. It also persists throughout browsers (chrome and firefox). The comment area seems to be hidden or the opacity turned off as I can highlight the text area, but it just does not show.

I discovered that after you have entered into full screen mode, you right click, and reload the frame, and then it will work.

 

Content types: 
BV52's picture

Hi Chris,

I am unable to reproduce the issue. Can you please check if you can see the issue here: https://bv-demo.h5p.com/content/1292302568799617949.

-BV

Hmmm, Maybe it is the version of H5P we are using.

Here is an example of it. 

https://chrisjung-sandbox.sites.olt.ubc.ca/h5p-japn/

 

otacke's picture

Hey, BV!

Make sure to embed the content, then you will be able to reproduce the issue with content stemming from H5P.com, too, so:

  1. Embed that content on a different page.
  2. Go to slide 6.
  3. Go to full screen.
  4. Click on one of the hint bubbles.
  5. The hint popup does not open.

Also, I found another issue while trying:

  1. Open the content on a touch device, e.g. smart phone. The virtual touch device from the browser's dev tools will do, too. No need to embed.
  2. Go to slide 6.
  3. Click on one of the hint bubbles. The popup opens.
  4. Swipe to a different slide.
  5. The popup does not close and remains visible.
BV52's picture

Hi Oliver,

Thank you for the hint. I was able to reproduce the issue reported by the OP but not the touch device issue. 

https://h5ptechnology.atlassian.net/browse/HFP-4038

-BV

otacke's picture

See video recording posted at https://h5ptechnology.atlassian.net/browse/HFP-4038. "Swipe" may be the important word from my instructions for reproducing the issue.

BV52's picture

Ahuh! That explains it, I forgot that you can swipe through the slides.

Thanks!