Weird gray gradient background appearing on mobile - css

Question

I have a simple login form on a sliding modal. On desktop and in responsive mode with dev tools it looks as it should. However on mobile Chrome and Safari -- on an iphone, there's a weird gray rounded box or shadow.
I'm using tialwind css. And the component was built with headless ui.
I've tried adding -webkit-appearance: none; to the form, but the box still persits.
Here's how it looks on desktop:
desktop view
and here is how it looks on my iphone:
mobile view
here is the component code:
return (
<Transition.Root show={showModal.open} as={Fragment}>
<Dialog
as="div"
className="fixed inset-0 overflow-hidden"
onClose={() => setShowModal({ open: false })}
>
<div className="absolute inset-0 overflow-hidden">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="absolute inset-0 bg-black bg-opacity-80 transition-opacity" />
</Transition.Child>
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="w-screen max-w-md">
<div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
<div className="px-4 sm:px-6">
<div className="flex items-start justify-between">
<Dialog.Title className="text-2xl font-light text-vhGreen">
Welcome!
</Dialog.Title>
<div className="ml-3 h-7 flex items-center">
<button
type="button"
className="bg-white rounded-md text-vhGreen hover:text-gray-500 focus:outline-none"
onClick={() => setShowModal({ open: false })}
>
<span className="sr-only">Close panel</span>
<XCircleIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
</div>
</div>
<div className="mt-6 relative flex-1 px-4 sm:px-6">
{/* Replace with your content */}
<div className="absolute inset-0 px-4 sm:px-6">
<div className="relative p-6 flex-auto bg-white">
<h4 className="text-vhGreen font-light">
Login or sign up to gain access to the gallery and to
receive periodic updates from Thea
</h4>
<form
type="submit"
onSubmit={(e) => handleSubmit(e)}
className="bg-white"
>
{isNewUser && (
<>
<div className="my-4 text-sm">
<label className="block text-vhGreen">
First Name
</label>
<input
value={authForm.firstName || ""}
onChange={(e) => handleChange(e)}
type="text"
name="firstName"
placeholder="First Name"
className="w-full px-4 py-3 rounded-md text-vhGreen font-light"
/>
</div>
<div className="my-4 text-sm">
<label className="block text-vhGreen">
Last Name
</label>
<input
value={authForm.lastName || ""}
onChange={(e) => handleChange(e)}
type="text"
name="lastName"
placeholder="Last Name"
className="w-full px-4 py-3 rounded-md"
/>
</div>
</>
)}
<div className="my-4 text-sm">
<label className="block text-vhGreen">Email</label>
<input
value={authForm.email || ""}
onChange={(e) => handleChange(e)}
type="text"
name="email"
placeholder="Email"
className="w-full px-4 py-3 rounded-md"
/>
</div>
<div className="my-4 text-sm">
<label className="block text-vhGreen">
Password
</label>
<input
value={authForm.password || ""}
onChange={(e) => handleChange(e)}
type="password"
name="password"
placeholder="Password"
className="w-full px-4 py-3 rounded-md"
onKeyDown={(e) => onKeyDown(e)}
/>
<div className="flex justify-end text-vhGreen text-sm font-light">
<button
type="button"
onClick={() => handleNewSwitch()}
>
{!isNewUser
? "Need an account? Sign Up!"
: "Already have an account? Login!"}
</button>
</div>
</div>
</form>
</div>
{/*footer*/}
<div className="flex items-center justify-center p-6 border-t border-solid border-blueGray-200 rounded-b">
<button
className="text-vhGreen background-transparent font-light uppercase px-6 py-2 text-xl outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={(e) => handleSubmit(e)}
>
{isNewUser ? "Sign Up" : "Login"}
</button>
</div>
</div>
{/* /End replace */}
</div>
</div>
</div>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);

Answer 1

faced same thing.
The problem is in:
type="button"
Try to remove that, works for me