Issues with webpage width when using zoom-out animation

[srikat]

Test page: https://oxygen.wpdemos.net/magnific-popup-test-page/

With the above page opened in a phone, when the second button having the text of "Single image lightbox (with zoom out animation)" is clicked, the body of the webpage seems to shrink and then go back to its regular width.

Screencast: https://cl.ly/f1cb430ede72

HTML:

<a id="link_button-12-519" class="ct-link-button mfp-zoom-out" href="https://oxygen.wpdemos.net/wp-content/uploads/2018/09/modern-white-house.jpg" target="_self">Single image lightbox (with zoom out animation)</a>

CSS:

.mfp-zoom-out .mfp-with-anim {
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform: scale(1.3);
}
.mfp-zoom-out.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.mfp-zoom-out.mfp-ready .mfp-with-anim {
  opacity: 1;
  transform: scale(1);
}
.mfp-zoom-out.mfp-ready.mfp-bg {
  opacity: 0.8;
}
.mfp-zoom-out.mfp-removing .mfp-with-anim {
  transform: scale(1.3);
  opacity: 0;
}
.mfp-zoom-out.mfp-removing.mfp-bg {
  opacity: 0;
}

JS:

jQuery('.mfp-zoom-out').magnificPopup({
    type: "image",

  // Delay in milliseconds before popup is removed
  removalDelay: 500,

  // Class that is added to popup wrapper and background
  // make it unique to apply your CSS animations just to this exact popup
  mainClass: 'mfp-zoom-out',

  callbacks: {
    beforeOpen: function() {
      // just a hack that adds mfp-anim class to markup 
       this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
       // this.st.mainClass = this.st.el.attr('data-effect');
    }
  },
  closeOnContentClick: true,
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});

The problem is not present when the page is viewed at smaller widths in Chrome.

Any advice on fixing this will be appreciated.