javascript – CSS animations extraordinarily sluggish, 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 website, the place folks can like feedback. When folks click on the like button, the “coronary heart” transforms itself and scales 2x, and has a clean transition.

Every thing works completely positive on desktop on Chrome and Firefox, however once I attempt it on iOS (on my iPhone 15 Professional Max), it is extraordinarily sluggish, 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 stunning, 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 thing is totally 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;
    top: 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%;
    top: 100%;
    overflow: hidden;
    transition: 0.5s;
    backdrop-filter: blur(1rem);
    border-radius: 5rem;
  }
  
  sturdy {
    z-index: 2;
    font-family: 'Oooh Child', cursive;
    font-size: 22px;
    letter-spacing: 5px;
    coloration: #FFFFFF;
    text-shadow: 0 0 4px white;
  }
  
  #glow {
    place: absolute;
    show: flex;
    width: 12rem;
  }
  
  .circle {
    width: 100%;
    top: 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:energetic {
    border: double 4px #FE53BB;
    background-origin: border-box;
    background-clip: content-box, border-box;
    transition: 0.1s;
    remodel: scale(1.4);
    animation: none;

  }
  
  .btn:energetic .circle {
    background: #FE53BB;
  }
  
  #stars {
    place: relative;
    background: clear;
    width: 200rem;
    top: 200rem;
  }
  
  #stars::after {
    content material: "";
    place: absolute;
    high: -10rem;
    left: -100rem;
    width: 100%;
    top: 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%;
    top: 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);
    }
  }

This is the HTML for the submit button:

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

Additionally, here is the CSS for the guts picture that customers must 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:energetic {
    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 truthfully consider what chatgpt gave me was utter full nonsense, which is why I am coming right here for assist.