0

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

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

你可以在我非常小的 codepen中看到这种行为（转载如下）。在 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'));
4

1 回答 1

0

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

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

于 2016-05-18T19:20:30.503 回答