Chrome iframe呈现错误

Question

我刚刚遇到了我见过的最奇怪的错误。

您可以在此处观看演示： Fiddle

我有来自谷歌地图的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。它有点难以解释所以我鼓励你看看我的fiddle。

如果我删除了“有问题的”评论中的任何css特性，那么问题就会消失。我的问题是：有没有办法解决这个问题，而不删除任何这些问题？

此问题仅在Chrome中可见 - Firefox和IE都可以。