html - クリップパス CSS に干渉する Google マップ

Question

あるセクションでクリップパスを使用し、まったく別のセクションで単純な Google マップを使用した Web ページがあります。

クリップ パスを使用した目的の効果は次のとおりです。

最初のセクションで使用される 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%);
}

Google マップの CSS は次のとおりです。

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

ここで、CSS を使用してマップを非表示にするか、単にファイルからマップを削除すると、目的の効果が得られますが、マップが存在する場合、コードの動作がおかしくなり、リロードごとにクリッピング セクションのレンダリングが異なります。

でも、タブを切り替えて戻ってくると変わる。ややこのように:

またはこれ：

どんな助けでも大歓迎です！

PS私はどこにも黒い背景さえ持っていません。CSS は適切にリセットされます。