I was migrating my app’s modal from old <ui-modal> to new polaris web component’s <s-modal> and notice the weird positioning on the screen.
Old via <ui-modal>:
New via <s-modal> (shifted down a bit on a screen and no longer centered):
In both cases, I’m just using polaris and app-bridge from the shopify CDN:
<script src="https://cdn.shopify.com/shopifycloud/polaris.js"></script>
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
My code is quite simple:
<s-button commandFor={MODAL_ID} command="--show">How to unsubscribe?</s-button>
<s-modal heading="How to unsubscribe?" id={MODAL_ID}>
// modal content...
Also, with the <s-modal> there was occasional weird white blink of page’s content on the first model open on page (but not on futher opens), but it’s hard to replicate…