宏伟的弹出窗口未在移动设备上显示

Question

我尝试搜索并尝试了一些建议，但没有一个对我有用。 全部，可以在PC上正常运行，但不能在移动设备上显示：

// JS文件

// Inline popups for text

    $('#inline-popups').magnificPopup({
      fixedBgPos: true, 
      fixedContentPos: true,
      delegate: 'a',
      removalDelay: 0, //delay removal by X to allow out-animation
      callbacks: {
        beforeOpen: function() {
           this.st.mainClass = this.st.el.attr('data-effect');
        }
      },
      midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
    });

// HTML（触发）

<ul id="inline-popups">
      <li class="nav-item"><a href="#magnificent-id" class="nav-link" data-effect="mfp-zoom-in">Open modal</a></li>                        
 </ul>

// HTML（内容）

<div id="magnificent-id" class="white-popup mfp-with-anim mfp-hide">
        You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.
    </div>

...由于某种原因动画无法播放。

// CSS

.mfp-zoom-in {

  /* start state */
  .mfp-with-anim {
    opacity: 0;
    transition: all 0.2s ease-in-out; 
    transform: scale(0.8); 
  }

  &.mfp-bg {
    opacity: 0;
      transition: all 0.3s ease-out;
  }

  /* animate in */
  &.mfp-ready {
    .mfp-with-anim {
      opacity: 1;
      transform: scale(1); 
    }
    &.mfp-bg {
      opacity: 0.8;
    }
  }

  /* animate out */
  &.mfp-removing {

    .mfp-with-anim {
      transform: scale(0.8); 
      opacity: 0;
    }
    &.mfp-bg {
      opacity: 0;
    }

  }

}

我正在使用 Magnificent Popups v1.1.0 和 jQuery v3.4.1

我将不胜感激。