Bug 222622 – iFrame in modal is not receiving height change when modal goes from display:none to display:block

• Component: CSS
• Status: NEW

[isa hv]

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

[Radar WebKit Bug Importer]

<rdar://problem/74955080>