谷歌地图干扰剪辑路径CSS

Question

我有一个网页，我在一个部分使用剪辑路径，并使用一个简单的谷歌地图完成不同的部分。

使用剪辑路径所需的效果是：

第一部分使用的CSS是：

#frame2:before{
    content:'';
    display:block;
    position:absolute;
    left:0;
    top: -200px;
    z-index:1;
    width: 100%;
    height: 200px;
    background: #fff url('../images/hex1.png') no-repeat left 100px;
    clip-path:url(../images/frame.svg#clipPath);  /*Firefox*/
    -webkit-clip-path:polygon(0% 25%, 33% 99%, 100% 0%, 100% 100%, 0% 100%);
}

谷歌地图的CSS是：

#map{
    width:100%;
    height:600px;
    background:#ccc;
}

现在，每当我通过CSS隐藏地图或者只是从文件中删除地图时，我都会得到所需的效果，但是当地图存在时，代码表现得很奇怪，剪切部分会在每次重新加载时呈现不同。 / p>

甚至，当我切换标签并返回时，它会发生变化。有点像这样：

或者这个：

任何帮助将不胜感激！

P.S。我在任何地方都没有黑色背景。 CSS已正确重置。