Agamotto inside Interactive Book hides description (container height set to 0px)

Hi,

We’re encountering a rendering defect when embedding Agamotto within Interactive Book. The bottom description is intermittently hidden or overlaps other elements on initial load. 

Impact

End users land on a page where the Agamotto description is not visible or overlaps other elements, degrading comprehension and breaking expected content flow.

Observed Behavior

The description content exists in the DOM, but the Agamotto component’s container height is set to 0px. In the hidden state, the parent element(s) and the iframe also inherit zero height. The issue is triggered when navigating forward into the page (please see the attached video). If the user navigates back and then returns to the page, the Agamotto instance appears to reload and render correctly. A full page refresh also clears the issue. In the overlapping case, forcing a non-zero height on .h5p-agamotto-descriptions-container resolves the overlap

Environment

Agamotto: 1.6.11 within H5P Interactive Book

Thank you very much in advance.

 

Best regards

Content types: 

Below is another example, when the content overlapping other elements 

otacke's picture

Same reply as on github that you have received already: 

"Would you please be so kind to either give me a link to experience this directly or share the content file for download somewhere, so I can reproduce this locally without having to guess what the parameters might need to be."

papi Jo's picture

I have the same problem. A possible workaround if the Descriptions are missing is to refresh the page (F5 key on Windows). This will display the Descriptions.

Try this sample Interactive book with page 1 text only and page 2 Agamotto.

https://www.rezeau.org/wp-h5p/testing-agamotto/

otacke's picture

Thanks, fixed.

otacke's picture

I fixed this in Agamotto 1.6.12. Since I cannot update even my own content types on the H5P Hub, you will need to get in by downloading the demo content from https://www.olivertacke.de/labs/2017/04/14/agamotto-as-if-it-way-yesterday/ and then uploading it to your site with admin rights.