Bug 222622

Created attachment 422006 [details] LEFT: problem in Safari, RIGHT: Expected view like Firefox & Chrome Repro: on safari, go to: https://www.betterworldbooks.com/product/detail/Little-Brother-9780765319852 wait for page to load, then open book preview preview modal shows details page with empty theater On Firefox, Chrome: go to: https://www.betterworldbooks.com/product/detail/Little-Brother-9780765319852 wait for page to load, then open book preview preview modal shows Book in full immersion mode ------------ TLDR: Safari is not passing through the height change with its CSS engine when the modal pops up (using: `display: none => display: block`). FF & Chrome do. i put 2 iframes here: https://deploy-preview-644--lucid-poitras-9a1249.netlify.app/bookreaderdemo/demo-ia-bwb-preview i put some logging in (DEV modal) in with the Book's resize observer, and do note that Safari is not catching the modal CSS switch: display: none => display: block used in BWB side.repro steps: - go to link in firefox -> open dev console - note output in console for #BookReader resize observer: - yes, fullscreen is on - && height is at 0px - wait till all assets are loaded -> click “Open Dev Modal” -> BR is in “fullscreen” - #BookReader Resize Observer console output: height = 500px Safari repro steps: - got to link & open dev console - note output in console for #BookReader resize observer: - yes, fullscreen is on - && height is at 0px - wait till all assets are loaded -> click “Open Dev Modal” -> details page, empty theater - #BookReader Resize Observer console output: height = 0px