Background animation infinite zoom-in zoom-out

[alij2022]

Hi,

I have a <section> which has a background image and a headline inside. I want to animate the background zoom-in and out infinite. So I did this:

section {
    width:100%;
    min-height:100vh;
    background-image:url('images/bg.webp');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top center;
    box-sizing:border-box;
    display:flex;
 animation: zoom 30s infinite;
}

@keyframes zoom {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.01, 1.01);
  }
  100% {
    transform: scale(1, 1);
  }
}

Everything is working fine except that I see the browser window also is resizing once the image exceeds it original size when zoom-in as show the pic below:

May I know how to prevent this from resizing each time it animates?

Thank you