search

Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
86 stars 9 forks source link

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

Open darrynten opened 1 month ago

darrynten commented 1 month ago

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:

Platform

darrynten commented 1 month ago

Any updates on this?

darrynten commented 1 month ago

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 commented 1 month ago

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

https://github.com/user-attachments/assets/7bdaad86-fc58-4715-8a54-3ca3066b51f4

darrynten commented 1 month ago

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.