如何修复Safari9.1在检查CSS位置后转换剪辑路径的问题

Question

我在Safari 9.1中看到的行为似乎是Safari中的一个错误，但我把它放在这里是为了看看我的代码是否有问题。

我有一个网站，正在转换CSS形状多边形剪辑路径的用户操作。它在Chrome 50上运行得很好，但在Safari上则不然。在Safari上，当另一个插件使用jQuery检查有问题元素的CSS位置时，剪辑路径停止转换。

你可以在我的极小代码笔中看到这种行为（转载如下）。在Safari中，您可以单击绿色三角形来查看它的动画以填充页面。然而，当您单击红色三角形时，它无法填充页面，尽管唯一的区别是我检查了它的$().css('position')。在Chrome中，两个三角形都可以正常工作。

有办法解决这个问题吗？

---

HTML:

<div id="div1"></div>
<div id="div2"></div>

CSS：

body {
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin: auto;
}
#div1, #div2 {
  position: absolute;
  top:0;
  width:50%;
  height:100%;
  transition: clip-path 1s, -webkit-clip-path 1s, width 1s;
}
#div1 {
  background: green;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
}
#div1.active {
  width: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#div2 {
  background: red;
  -webkit-clip-path: polygon(0 0, 0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 0 0, 100% 100%, 0 100%);
}
#div2.active {
  width: 100%;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

JS:

$('div').click(function() {
  $(this).toggleClass('active');
});
console.log($('#div2').css('position'));

Answer 1

我要使用的解决方法是分离剪辑路径和我需要对其进行位置评估的元素。我将路径剪辑为外部div，并让插件咀嚼内部div。因此，我回避整个问题。

然而，我希望得到一个不需要添加额外元素的答案。