Html Chrome iframe渲染错误

我刚刚遇到了我见过的最奇怪的虫子

您可以在此处看到演示：

我有一个来自google maps的iframe，包装在具有以下样式的div中：

.container {
    width: 600px;
    background: red;

    /* Problematic propeties */
    box-shadow: 0px 40px 20px 0 blue;
    perspective: 10px;
    overflow: hidden;
    /* ---- */
}

iframe的唯一样式（默认样式除外）是

display:block

问题是，iframe会被移动，这取决于其父div的box shadow的值。从我的实验中，我发现它会被：box shadow blur-box shadow x-position向右移动。这有点难以解释，所以我鼓励你看看我的

如果我删除“Problem Properties”注释中的任何css属性，问题就会消失。我的问题是：有没有办法解决这个问题，而不删除任何这些属性

---

这个问题只在Chrome中可见-Firefox和IE都很好。

透视图：10px

-这应该实现什么？一旦我删除它，我就可以打开和关闭框阴影，而不必移动iframe…透视图在我的整个页面上是必要的，因为我使用css转换。为了简单起见，我删除了这些转换。

透视图：10px

——这应该实现什么？一旦我删除它，我就可以打开和关闭框阴影，而不必移动iframe…透视图在我的整个页面上是必要的，因为我使用css转换。为了简单起见，我删除了转换。