为什么缩放的 iframe 水平滚动

Question

我正在尝试缩小 iframe 元素（使用 css 媒体查询）以更好地适应我的页面。但是，当它缩小并且我开始与 iframe 交互时，我的网页会水平滚动。当我使用 Chrome 时，下面的小提琴演示了这个问题。

https://jsfiddle.net/52tbt30j/2/

这是html：

<p>Before Iframe</p>

<iframe class="studyStackIframe" src="https://www.studystack.com/inewflashcard-1"
    width="850" height="440" frameborder="0" scrolling="no"
    style="background-color:pink;overflow:hidden"></iframe>

<p>After Iframe</p>

这是 css（减去供应商前缀属性）：

@media all  and   (max-width: 875px){

  * {
      background-color: pink;
  }    


  .studyStackIframe {
      transform: scale(0.8, 0.8);
      transform-origin: top left;
  }
}

要查看问题，请调整 Chrome 的大小以缩小页面。粉红色背景显示后，继续缩小窗口，使 iframe 元素刚好适合该区域。现在单击红色和绿色框几次。您会注意到页面水平滚动，因此 iframe 元素没有完全显示。

（jquery 动画也有一些问题，但我现在专注于滚动问题。）

Answer 1

.studyStackIframe {    
margin: 0 auto;
display: block;
}

在您的 iframe 上解决问题