Iframe内部元素超出iframe区域

Question

问题

我在父页面中嵌套了一个 iframe，在 iframe 进行操作时，会出现 iframe 位置不变，但内部元素超出 iframe 区域的情况。

iframe 布局方式

.frame {

  position: fixed;

  top: 0;

  right: -600px;

  width: 600px;

  height: 100%;

  z-index: 1000;

  outline: 0;

  border: 0;

  background-color: #fff;

  transition: right .5s;

  -webkit-transition: right .5s;

}

.frame_open {

  right: 0px;

  box-shadow: -6px 6px 12px 0 rgba(26,37,57,0.2);

}

通过添加/删除 chateasy-frame_open 类名来控制iframe的显示隐藏

问题截图

操作图示：

开发者工具调试图示：

已经尝试的操作

1. 将 iframe 内的页面设置为 overflow: hidden; ，没有效果

2. 怀疑是父级页面的滚动条宽度撑开，所以更改 iframe 布局后仍会触发
   
   

开发环境

• Chrome：版本 66.0.3359.117（正式版本） （64 位）

Answer 1

解决方案经过尝试后，去除 iframe 的 box-shadow 样式即可解决该问题。为了保留阴影，用加了阴影样式的 div 将 iframe 包裹遗留问题box-shadow 导致 iframe 内部元素错位的原因是什么？

Answer 2

例子你看这个列子内容都没超出去。又试了下，这个还真不是iframe的问题，应该是你页面内容的问题