javascript – CSS animations extraordinarily gradual, laggy, and horrible on iOS however positive on desktop

I am making a reasonably easy web site, with a pair pretty easy CSS animations. As an example, I’ve a like button on my web site, the place individuals can like feedback. When individuals click on the like button, the “coronary heart” transforms itself and scales 2x, and has a clean transition.

Every part works completely positive on desktop on Chrome and Firefox, however once I strive it on iOS (on my iPhone 15 Professional Max), it is extraordinarily gradual, laggy and unusable.

I even have a submit button with some fancy CSS keyframes that makes little stars transfer contained in the submit button to make it lovely, and whereas the animations aren’t lagging for this button, the celebrities on iOS are fully getting out of the container and overflowing over different parts on iOS, whereas on desktop every part is completely positive.

Tremendous irritating!

Right here is my submit button:

CSS:

.btn {
    margin-top: 1rem;
    margin-bottom: 1rem;
    show: flex;
    justify-content: heart;
    align-items: heart;
    width: 13rem;
    overflow: hidden;
    peak: 3rem;
    background-size: 300% 300%;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
    transition: 0.5s;
    animation: gradient_301 5s ease infinite;
    border: double 4px clear;
    background-image: linear-gradient(#212121, #212121),  linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
    background-origin: border-box;
    background-clip: content-box, border-box;
  }
  
  #container-stars {
    place: absolute;
    z-index: -1;
    width: 100%;
    peak: 100%;
    overflow: hidden;
    transition: 0.5s;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
  }
  
  robust {
    z-index: 2;
    font-family: 'Oooh Child', cursive;
    font-size: 22px;
    letter-spacing: 5px;
    shade: #FFFFFF;
    text-shadow: 0 0 4px white;
  }
  
  #glow {
    place: absolute;
    show: flex;
    width: 12rem;
  }
  
  .circle {
    width: 100%;
    peak: 30px;
    filter: blur(2rem);
    animation: pulse_3011 4s infinite;
    z-index: -1;
  }
  
  .circle:nth-of-type(1) {
    background: rgba(254, 83, 186, 0.636);
  }
  
  .circle:nth-of-type(2) {
    background: rgba(142, 81, 234, 0.704);
  }
  
  .btn:hover #container-stars {
    z-index: 1;
    background-color: #212121;
  }
  
  .btn:hover {
    remodel: scale(1.1);
    cursor: pointer;
  }
  
  .btn:lively {
    border: double 4px #FE53BB;
    background-origin: border-box;
    background-clip: content-box, border-box;
    transition: 0.1s;
    remodel: scale(1.4);
    animation: none;

  }
  
  .btn:lively .circle {
    background: #FE53BB;
  }
  
  #stars {
    place: relative;
    background: clear;
    width: 200rem;
    peak: 200rem;
  }
  
  #stars::after {
    content material: "";
    place: absolute;
    high: -10rem;
    left: -100rem;
    width: 100%;
    peak: 100%;
    animation: animStarRotate 90s linear infinite;
  }
  
  #stars::after {
    background-image: radial-gradient(#ffffff 1px, clear 1%);
    background-size: 50px 50px;
  }
  
  #stars::earlier than {
    content material: "";
    place: absolute;
    high: 0;
    left: -50%;
    width: 170%;
    peak: 500%;
    animation: animStar 60s linear infinite;
  }
  
  #stars::earlier than {
    background-image: radial-gradient(#ffffff 1px, clear 1%);
    background-size: 50px 50px;
    opacity: 0.5;
  }
  
  @keyframes animStar {
    from {
      remodel: translateY(0);
    }
  
    to {
      remodel: translateY(-135rem);
    }
  }
  
  @keyframes animStarRotate {
    from {
      remodel: rotate(360deg);
    }
  
    to {
      remodel: rotate(0);
    }
  }
  
  @keyframes gradient_301 {
    0% {
      background-position: 0% 50%;
    }
  
    50% {
      background-position: 100% 50%;
    }
  
    100% {
      background-position: 0% 50%;
    }
  }
  
  @keyframes pulse_3011 {
    0% {
      remodel: scale(0.75);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
  
    70% {
      remodel: scale(1);
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
  
    100% {
      remodel: scale(0.75);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
  }

Here is the HTML for the submit button:

    <button class="btn" kind="button">
        <robust>Submit</robust>
        <div id="container-stars">
          <div id="stars"></div>
        </div>
      
        <div id="glow">
          <div class="circle"></div>
          <div class="circle"></div>
        </div>
      </button>

Additionally, this is the CSS for the guts picture that customers have to click on to love a remark.

.coronary heart {

    width: 30px;
    margin: 0;
    transition: 0.4s;
    
}



.coronary heart:hover {
    transition: 0.1s;
    cursor: pointer;
    remodel: scale(1.5);
 
}

.coronary heart:lively {
    transition: 0.3s;
    remodel: scale(3.7);
    opacity: 0.1;
 
}

I requested chatgpt to assist me make webkit queries for iOS, tried a pair issues on Google however nothing labored. I actually consider what chatgpt gave me was utter full nonsense, which is why I am coming right here for assist.