press.stripe.com - 3D element (book) missing from the top of the page

[Kinrany]

URL: https://press.stripe.com/scaling-people

Browser / Version: Firefox Mobile 116.0 Operating System: Android 11 Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Missing items Steps to Reproduce: The book at the top of the screen is not visible in Firefox. The site is a little laggy on Chrome too, possibly because of the book's animation, but becomes unusably slow on Firefox until you scroll to the very bottom of the page.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20230621161008
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[sv-calin]

Thank you for reporting this issue, I was able to reproduce it. Other than the book, the page can be browsed without any issues, it isn't slow for me.

Tested on: • Browser / Version: Firefox Nightly 116.0a1-20230622214511 / Firefox Release 114.0.2-20230619081400 / Chrome 114.0.5735.57 • Operating System: OnePlus 6 A6000 (Android 11) - 1080 x 2280 pixels, 19:9 ratio (~402 ppi pixel density)

Notes:

1. Reproducible on both Firefox Release and Nightly
2. Not reproducible on Chrome (the book might take a few seconds to load)

Moving to Needsdiagnosis.

[qa_25/2023]

[wisniewskit]

Hmm. This works in responsive design mode for me, but not on an actual phone. They seem to be hiding the 3d book's canvas with opacity:0 until it is initialized, and then it is removed with this CSS:

.PressHomepage--isInitialized .PressHomepageCanvas {
    opacity: 1;
}

So it seems that they're not loading it, or there is a race condition preventing the loading from happening correctly. But it's proving to be a deep dive into their code that hasn't born any real fruit yet.