H5P activities sometimes disappear when collapsed inside of an H1 section

mcgratay commented 5 years ago

Prerequisites

[] Can you reproduce the behavior you wish to address with all plugins except Pressbooks deactivated?
[x] Are you running the latest version of Pressbooks, the latest version of McLuhan, and the latest version of WordPress?
[x] Are you experiencing the issue while using this book theme?
[x] Did you perform a cursory search to see if your bug or enhancement is already listed?

Description

When a user has enabled the Collapsed Sections setting in the theme options for their webbook, H5P activities in that section sometimes do not appear. Whether the activity displays is not reliably reproducible, but seems to follow this pattern:

H5P content directly under a collapsible H1 won't disappear, but will be followed by a large gap of blank space in the page
H5P content a few paragraphs into a collapsible section will disappear
All H5P content will reappear when the page is refreshed, and will continue to successfully display with subsequent reloads
All H5P content inside of collapsed sections will be followed by a large gap of blank space if that H5P activity does display
H5P content outside of collapsed sections on the same page will not be followed by a large gap in the text

Example: https://testbooknormaluser.textopress.com/chapter/h5p-in-a-collapsed-subsection/

Steps to Reproduce

Go to Appearance > Theme Options, then select the Web Options tab to find the Collapse Sections setting
Select "Collapse sections" and click "Save Changes"
Go to Plugins, then find the H5P plugin and click Activate
Go to H5P Content and create a new H5P activity, then copy its shortcode (ex: [h5p id="1"])
Go to Organize > Add Chapter to add a chapter
Add some filler text, then create a few headings and tag them as Heading 1s with the Paragraph Styles tool
Paste in the H5P shortcode directly after one Heading 1 and after a few paragraphs underneath another Heading 1
Save your chapter and view the webbook

Expected behavior: H5P activities always display when the shortcode has been placed in the chapter and flow correctly with other text and content in the chapter

Actual behavior: H5P activities sometimes disappear when inside of a collapsed section, or cause spacing issues when they do display

System Information

Book Info

Book ID: 180 Book URL: http://testbooknormaluser.textopress.com/ Book Privacy: Public

Browser

Platform: OS X Browser Name: Safari Browser Version: 12.0.2 User Agent String: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.2 Safari/605.1.15

WordPress Configuration

Network URL: http://textopress.com/ Network Type: Subdomain Version: 5.0.3 Language: en_US WP_ENV: staging WP_DEBUG: Disabled Memory Limit: 64M

Pressbooks Configuration

Version: 5.7.0-dev Book Theme: Andreessen Book Theme Version: 2.0.0 Root Theme: Aldine Root Theme Version: 1.6.0-dev

Pressbooks Dependencies

Epubcheck: Installed Kindlegen: Installed xmllint: Installed PrinceXML: Not Installed Saxon-HE: Installed

Must-Use Plugins

Bedrock Autoloader: 1.0.0 hm-autoloader.php: n/a telemetry.php: n/a

Network Active Plugins

Hypothesis: 0.5.0 Pressbooks: 5.7.0-dev Pressbooks BISAC: 2.0.0 Pressbooks Client Marketing: 1.0.1 Pressbooks LTI Provider: 1.1.2 Pressbooks SELF-e: 1.5.1 Pressbooks Stats: 1.6.2 Pressbooks Whitelabel: 1.3.0 Redis Object Cache: 1.4.1

Book Active Plugins

H5P: 1.11.3 Hypothesis: 0.5.0 Pressbooks: 5.7.0-dev Pressbooks BISAC: 2.0.0 Pressbooks Client Marketing: 1.0.1 Pressbooks LTI Provider: 1.1.2 Pressbooks SELF-e: 1.5.1 Pressbooks Stats: 1.6.2 Pressbooks Whitelabel: 1.3.0 Redis Object Cache: 1.4.1

Inactive Plugins

Parsedown Party: 1.1.1 Pressbooks BiblioBoard OAuth: 3.0.0 Pressbooks CAS Single Sign-On: 1.1.1 Pressbooks Shibboleth Single Sign-On: 0.0.5 Pressbooks VIP: 5.4.0 TablePress: 1.9.1 WP QuickLaTeX: 3.8.6

Server Configuration

PHP Version: 7.1.23-3+ubuntu16.04.1+deb.sury.org+1 MySQL Version: 5.5.5 Webserver Info: nginx/1.13.6

PHP Configuration

Safe Mode: Disabled Memory Limit: 256M Upload Max Size: 25M Post Max Size: 25M Upload Max Filesize: 25M Time Limit: 120 Max Input Vars: 1000 URL-aware fopen: On (1) Display Errors: N/A

PHP Extensions

OPcache: Zend XDebug: Disabled cURL: Supported cURL Version: 7.47.0 imagick: Not Installed xsl: Installed

SteelWagstaff commented 5 years ago

Don't know if it's connected, but I recently noticed an H5P element 'disappearing' in a collapsible details element as well -- this is an unsupported use, I know, but possibly of related interest. See https://wisc.pb.unizin.org/oersourcebook/chapter/show-hide-experimentation/. There's an H5P activity in the first details element. It's in the page HTML, but doesn't display in the browser ... screen shot 2019-02-06 at 1 22 30 pm

... unless/until I inspect the element, upon which it's visible in the page until the browser is refreshed. screen shot 2019-02-06 at 1 22 43 pm I observed identical behavior in both Chrome 71.0.3578.98 and Firefox 65.0. Mysterious.

gunha commented 5 years ago

We have a few other users at UW experiencing this issue as well. Here's an example: https://wisc.pb.unizin.org/attest/chapter/h5p-heading-test/

(Let me know if the activities appear!)

SteelWagstaff commented 5 years ago

Hi Andrew--they don't appear for me unless & until I click 'inspect element' when they suddenly pop into view. Not sure what's happening here, but we'll file it as a bug and ask the dev team to look into it when they're able.

SteelWagstaff commented 5 years ago

I haven't dug this much, so I don't know whether it's our bug or H5Ps or both, but my first guess would be that there's some kind of javascript conflict/issue happening here ...

gunha commented 5 years ago

Thanks for checking! Yeah, I cant get them to show up in chrome at all, but firefox they will show up when I 'inspect.'

gunha commented 5 years ago

Another note -- When a users zooms in and out in the browser (ctrl+ or ctrl-) the h5p activities will appear!

pressbooks / pressbooks-book