Safari中的剪切路径错误地剪切了{position：relative} DIV

Question

我希望我只是个傻瓜，并且缺少明显的东西...

当Safari在另一个具有{clip-path}的DIV中时，似乎Safari没有正确地裁剪{position：relative} DIV –内部DIV确实在视觉上被裁剪，但其区域似乎保持完整。我正在使用{cursor：pointer}来演示问题：

<div style="width:300px;height:300px;background:#F00;clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);">

    <div style="width:600px;height:100px;background:#0F0;cursor:pointer;"></div>

    <div style="position:relative;width:600px;height:100px;background:#00F;cursor:pointer;"></div>

</div>

在该示例中，您应该看到一个修剪过的菱形。

顶部的绿色DIV固定在钻石上。如果将鼠标悬停在它上面，应该会看到“指针”光标。如果将鼠标右移至修剪的菱形之外，则指针光标将恢复为正常状态。

但是蓝色DIV（即{position：relative}），如果将鼠标向右移动（使用Safari），则它仍然是菱形外部的“指针”光标。看起来像位于{clip-path}设置的DIV中的{position：relative} DIV，是视觉上尊重剪切路径，而不是其他方式。

（对于我的应用程序，无法在内部位置上设置另一个剪辑路径：相对DIV。）