html - 谷歌地图干扰剪辑路径 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 隐藏地图或简单地从文件中删除地图时，我都会得到想要的效果，但是当地图在那里时，代码的行为很奇怪，剪辑部分在每次重新加载时呈现不同。

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

或这个：

任何帮助，将不胜感激！

PS我什至在任何地方都没有黑色背景。CSS 已正确重置。