Encountering an issue with a login form displayed on a sliding modal. The design looks correct on desktop and even in responsive mode with dev tools, but when accessed through mobile Chrome or Safari on an iPhone, an unusual gray rounded box or shadow appears.
The layout is styled using tailwind CSS, and the component was constructed with headless UI.
Attempts have been made to rectify the problem by adding -webkit-appearance: none; to the form, yet the unwanted box persists.
Below is how it appears on desktop: desktop view
And this is how it displays on my iPhone: mobile view
Here is the code snippet for the component:
return (
<Transition.Root show={showModal.open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 overflow-hidden"
onClose={() => setShowModal({ open: false })}
>
<!-- Rest of the component code here -->
</Dialog>
</Transition.Root>
);