Max modals always report incorrect document body height value of 0, width works as expected

[darrynten]

Describe the bug

Opening a max modal and inspecting the document.body you will see that clientHeight and offsetHeight are always 0.

The clientWidth and offsetWidth values are correct.

The only way you can get any sort of height estimate is to use window.opener.document.body.clientHeight instead, which is of course an incorrect value.

To Reproduce

Steps to reproduce the behaviour:

1. Make a variant="max" modal
2. Open the modal
3. Right click inspect and make sure you've selected the modal context
4. In the console type document.body.clientHeight and you will get a value of 0
5. In the console type document.body.clientWidth and you will see the correct value
6. You can see the parent pages details with window.opener.document.body.clientHeight

Expected behaviour

The document.body.clientHeight and related values should be the correct value inside of the max modal context.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @shopify/app-bridge @ cdn

Platform

• OS: All
• App: All

[darrynten]

Any updates on this?

[darrynten]

In case anyone else is stuck on this, I resolved it by setting height: 100vh on the element inside the modal.

A setting of height: 100% does not work, it must be 100vh in order to get the right value on document.body.clientHeight

[vividviolet]

@darrynten I can seem to reproduce the issue. Can you record a video?

Screen.Recording.2024-08-09.at.9.31.45.PM.mov

[darrynten]

I've already merged and moved on but please note this was not within the context of react in any way, it is only when using the vanilla ui-modal components in a plain old html document with the app bridge CDN script only.