'the play button slides down when zooming in

normal scale

zoomed in

the play button slides down when zooming in, but the other elements remain in their places. I've been trying to figure out how to fix it for a long time, I tried to close it all in a sticky container and make the form a child element, but it didn't help solve the problem

the code responsible for the player: 
.white button{
    position: absolute;

}
    
#play{
    position: absolute;
    width: 7vw;
    height: 3vw;
    margin-top: -78vh;
    margin-left: 30vw;
    font-family: 'Clash Display', sans-serif;
    font-size: 1.2vw;
    border-radius: 150px;
    border-style: none;
    pointer-events: none;
    mix-blend-mode: color-dodge;
    padding-left: 2.6vw;
    }

.playpause {
    position: absolute;
    padding: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    pointer-events: auto;
    
  }
  
  .playpause .button {
    position: absolute;
    width: 1.1vw;
    height: 1.1vw;
    background: rgba(10, 10, 10, 0.9);
    transition: inherit;
    clip-path: polygon(0 0, 50% 25%, 50% 75%, 50% 75%, 50% 25%, 100% 50%, 100% 50%, 0 100%);
    margin-top: -39.4vw;
    margin-left: 29.9vw; 
    mix-blend-mode: multiply;
    pointer-events: auto;
  }
  
  .playpause.playing .button {
      position: absolute;
     clip-path: polygon(0 0, 40% 0, 40% 100%, 60% 100%, 60% 0, 100% 0, 100% 100%, 0 100%);
     color: rgb(32, 32, 32);
    mix-blend-mode: multiply;
    pointer-events: auto;
  }

<div class="playpause">
        <div class="button"></div>
      </div>
      <div></div>
        <form
         class="white button"><input type="button" value="Play" id="play">
        </form>

<script>
      const playpause = document.querySelector('.playpause');
        playpause.addEventListener('click', () => {
          playpause.classList.toggle('playing');
        });
    </script>
htmlcsslayoutpositioning


Solution 1:[1]

Use top & left property to position and avoid using margins for positioning in css. Second, use position: relative; on the parent of your button to avoid mess.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mujeeb Shaikh

Related Questions