jquery - 检查 CSS 位置后如何解决 Safari 9.1 转换剪辑路径的问题？

Question

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

我有一个网站正在根据用户操作转换 CSS Shapes 多边形剪辑路径。它在 Chrome 50 上运行良好，但在 Safari 上运行不佳。在 Safari 上，剪辑路径在 another plugin 时停止转换使用 jQuery 检查相关元素的 CSS 位置。

您可以在 my pretty minimal codepen 中看到此行为(转载如下)。在 Safari 中，您可以单击绿色三 Angular 形以查看它以动画方式填充页面。但是，当您单击红色三 Angular 形时，它无法填充页面，即使唯一的区别是我检查了它的 $().css('position')。在 Chrome 中，两个三 Angular 形都可以正常工作。

有办法解决这个问题吗？

---

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。因此，我避免了整个问题。

但是，我喜欢不需要添加额外元素的答案。