Thiết kế website giá rẻ

Question

I was developing a login/signup page using a template or code done using styled-components library online; however, the strange thing is this works for all my devices, at also at different screen sizes on my laptop. However once the website launches the Overlay is somehow blocking my form that’s supposed to go on top on iPad devices ONLY (I’m not sure if it’s iOS in general because phones are too small and I have a different view for the phone)

I tried checking everywhere online, no one else seems to have the same problem. I also tried using Web Inspector on my mac, and even if I add visibility:hidden on that div it is still there, obstructing my form. I also tried removing the div completely, it’s still there.

Here’s my React Code


import * as Components from "/src/components/logincomponents";
export default function LoginSignup({ signinintent }) {

    const [logininputs, setLoginInputs] = useState({
        email: "",
        password: "",
    })

    const [signupInputs, setSignupInputs] = useState({
        firstName: "",
        lastName: "",
        username: "",
        email: "",
        password: "",
        grade: "",
    })

    const [err, setError] = useState(null);
    const [signIn, toggle] = React.useState(signinintent);
    const navigate = useNavigate();
    const { login } = useContext(AuthContext);


    const handleLoginChange = (e) => {
        setLoginInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
    };
    const handleSignupChange = (e) => {
        setSignupInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
    };

    const handleLoginSubmit = async (e) => {
        e.preventDefault();

        try {
            await login(logininputs)
            navigate("/course-selection");
        } catch (err) {
            const errorMessage = err.response?.data?.message || "An unexpected error occurred";
            setError(errorMessage);
        }
    };

    const handleSignupSubmit = async (e) => {
        e.preventDefault();

        try {
            const response = await axios.post("https://mybackend-vercel.app/backend/auth/signUp", signupInputs);
            setError("Success!");
            setLoginInputs((prev) => ({ ...prev, email: signupInputs.email }));
            setTimeout(() => {
                toggle(true);
                setError(null);
            }, 2000);
        } catch (err) {
            const errorMessage = err.response?.data?.message || "An Unexpected Error Has Occurred";
            setError(errorMessage);
        }
    };


    const handleToggle = (value) => {
        if (value) {
            setLoginInputs((prev) => ({ ...prev, password: "" }));
        } else {
            setSignupInputs((prev) => ({ ...prev, email: logininputs.email }));
        }
        toggle(value);
        setError(null);
    };


    return (
        <div>
            <Homenav accountpage={true} />
            <div className="md:flex hidden w-full h-screen items-center justify-center accountbackground">
                <div className="account bg-white rounded-lg shadow-lg relative overflow-hidden lg:w-[800px] lg:h-[50%] md:w-[678px] sm:w-[80%] min-w-[400px] min-h-[400px]">
                    <Components.SignUpContainer signingin={signIn}>
                        <form onSubmit={handleSignupSubmit} className={`${!signIn && "z-50"} bg-white flex items-center justify-center flex-col px-16 h-full text-center`}>
                            <h1>Create Account</h1>
                            <input required onChange={handleSignupChange} value={signupInputs.email} name="email" type="email" placeholder="Email" />
                            <input required onChange={handleSignupChange} value={signupInputs.username} name="username" type="text" placeholder="Username" />
                            <input required onChange={handleSignupChange} value={signupInputs.password} name="password" type="password" placeholder="Password" />
                            <input required onChange={handleSignupChange} value={signupInputs.grade} name="grade" type="number" min={1} placeholder="Year of Study" />
                            <p className="error">{err ? err : ''}</p>
                            <button type="submit">Sign Up</button>
                        </form>
                    </Components.SignUpContainer>
                    <Components.SignInContainer signingin={signIn}>
                        <form onSubmit={handleLoginSubmit} className="bg-white flex items-center justify-center flex-col px-16 h-full text-center">
                            <h1>Sign in</h1>
                            <input required onChange={handleLoginChange} value={logininputs.email} name="email" type="email" placeholder="Email" />
                            <input required onChange={handleLoginChange} value={logininputs.password} name="password" type="password" placeholder="Password" />
                            <p className="error" style={{ minHeight: '25px' }}>{err ? err : ''}</p>
                            <button type="submit">Sign In</button>
                        </form>
                    </Components.SignInContainer>
                    <Components.OverlayContainer signingin={signIn}>
                        <Components.Overlay signingin={signIn}>
                            <Components.LeftOverlayPanel signingin={signIn}>
                                <h1>Welcome Back!</h1>
                                <p>
                                    If you already have an account, please login with your personal info!
                                </p>
                                <Components.GhostButton onClick={() => handleToggle(true)}>
                                    Sign In
                                </Components.GhostButton>
                            </Components.LeftOverlayPanel>
                            <Components.RightOverlayPanel signingin={signIn}>
                                <h1>Don't have an account yet?</h1>
                                <p>
                                    Create an account with us now in just a few seconds!
                                </p>
                                <Components.GhostButton onClick={() => handleToggle(false)}>
                                    Sign Up
                                </Components.GhostButton>
                            </Components.RightOverlayPanel>
                        </Components.Overlay>
                    </Components.OverlayContainer>
                </div>
            </div>
{/* phone screen omitted */}

The imported styled-divs are here:

import styled from "styled-components";

export const SignUpContainer = styled.div`
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
  left: 0;
  width: 50%;
  ${props => (props.signingin !== true ? `transform: translateX(100%);` : null)}
  ${props => (props.signingin !== true ? `opacity: 1;` : `opacity: 0;`)}
  ${props => (props.signingin !== true ? `z-index: 5;` : `z-index: 1;`)}
    
`;

export const SignInContainer = styled.div`
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
  left: 0;
  width: 50%;
  z-index: 2;
  ${props => (props.signingin !== true ? `transform: translateX(100%);` : null)}
`;


export const OverlayContainer = styled.div`
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
  z-index: 100;
  ${props =>
    props.signingin !== true ? `transform: translateX(-100%);` : null}
`;

export const Overlay = styled.div`
  background: #3082CE;
  background: -webkit-linear-gradient(to right, #447ec2, #37679e);
  background: linear-gradient(to right, #447ec2, #37679e);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  color: #ffffff;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  ${props => (props.signingin !== true ? `transform: translateX(50%);` : null)}
`;

export const OverlayPanel = styled.div`
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  top: 0;
  height: 100%;
  width: 50%;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
`;

export const LeftOverlayPanel = styled(OverlayPanel)`
  transform: translateX(-20%);
  ${props => (props.signingin !== true ? `transform: translateX(0);` : null)}
`;

export const RightOverlayPanel = styled(OverlayPanel)`
  right: 0;
  transform: translateX(0);
  ${props => (props.signingin !== true ? `transform: translateX(20%);` : null)}
  ${props => (props.signingin !== true ? `z-index: 0;` : "z-index: 10")}
`;


export const Button = styled.button`
  border-radius: 20px;
  border: 1px solid #ff4b2b;
  background-color: #ff4b2b;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
  &:active {
    transform: scale(0.95);
  }
  &:focus {
    outline: none;
  }
`;


export const GhostButton = styled(Button)`
  background-color: transparent;
  border-color: #ffffff;
`;

Since this is an iPad specific issue, and it’s rendering perfectly fine everywhere else, including the iPad size using Chrome Inspect, I feel like there’s not much I can do? But if you notice anything please let me know.

Have a nice day!

Thiết kế website giá rẻ

Danh mục

Styled Components overlay blocks form element on iPad only