When clicking buttons on mobile, the background slides down (CSS and React) - Stack Overflow

admin管理员组

文章数量:1208155

The background slides down every time I click the button in the "ic-1"

I'm suspecting it's iPhone's incompatibility. Because when I let my friend test, the issue doesn't occur.

Here is the CSS snippet.

 .ic-1::before{
        content:'';
        top:0;
        left:0;
        width: 100%;
        height: 50vh;
        z-index: -1;
        position: absolute;
        filter:brightness(.4) contrast(1.25);
        background-image:url('image/bg5.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }

    .ic-1 div{
        display: flex;
        justify-content: center;

    }
    
    .login-form div{
        display: flex;
        width: 100%;
    }

    .ic-1 div button{
        cursor: pointer;
        border:1px rgb(255, 255, 255) solid;
        background:none;
        text-shadow: 1px 1px 2px black;
        color:rgb(255, 255, 255);
        margin-right: 1em;
        border-radius: 5px;
        padding: 10px 20px;
        margin-bottom: 2em;
    }
    
    .ic-1 div button:hover{
        background: rgb(255, 255, 255);
        color:black;
        text-shadow: none;
        border-radius: 10px;
        
    }

Here is React Snippet.

<div className='ic-1'>
      <h1><span>asd</h1>
      <p>blah blah blah</p>
      <div>
        <GrantToken></GrantToken>
        <a href="#origin">
          <button className='review-form'style={{textDecoration:'none'}} href="">extra <i class='bx bx-chevron-right'></i></button>
        </a>
      </div>

      </div>

• I tried testing on multiple device, Redmi, Windows, Windows (Responsive Mobile View) and the troublesomes are iPhone and iPad, but the iPhone is way more severe because background doesn't "fix" and adjust to its original position like iPad.

• I also tried changing z-index but that doesn't seem to work.

• Changing ic-1::before from position:absolute to position:fixed also doesn't work.

本文标签： When clicking buttons on mobilethe background slides down (CSS and React)Stack Overflow