Shopify/polaris

Sheet component switches sides on iPad

christianmittler opened this issue · 1 comments

Summary

I know the Sheet component got deprecated, but we have the use case of a complex calendar UI, for which this fits perfectly. Our app is mainly intended to be used as a POS link, and we noticed that the Sheet always appears on the left side of the screen, while instantly switching to the right side on the initial user interaction. This can easily be tested using the Safari browser with an iPad User Agent, on the official code sandbox from the docs: https://codesandbox.io/p/sandbox/lucid-surf-l3yjy2?module=App.tsx

If support is not possible, does anybody have an idea where this problem is coming from, so we can fix it ourselves?

Expected behavior

On iPads, the Sheet component should appear on the right side of the screen.

Actual behavior

It initially appears on the left side of the screen, and instantly switches to the right on the first user interaction with the component.

Steps to reproduce

Link to sandbox

  1. Open Sandbox in Safari
  2. Switch User Agent to IPadOS
  3. Open the Sheet

Are you using React components?

None

Polaris version number

12.10.0

Browser

Safari

Device

iPad