手机上出现奇怪的灰色渐变背景

Posted 2023-02-22

【中文标题】手机上出现奇怪的灰色渐变背景

【英文标题】：Weird gray gradient background appearing on mobile

【发布时间】：2021-10-31 12:34:11

【问题描述】：

我在滑动模式上有一个简单的登录表单。在桌面和使用开发工具的响应模式下，它看起来应该如此。然而，在移动版 Chrome 和 Safari 上——在 iPhone 上，有一个奇怪的灰色圆形框或阴影。

我正在使用 tialwind css。并且该组件是用无头 ui 构建的。

我已尝试将-webkit-appearance: none; 添加到表单中，但该框仍然存在。

它在桌面上的外观如下： desktop view

这是它在我的 iphone 上的外观： mobile view

这是组件代码：

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>
  );

【问题讨论】：

对我来说同样的问题。你找到答案了吗？

【参考方案1】：

面临同样的事情。

问题出在： type="按钮"

尝试删除它，对我有用