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

Posted 2023-05-07

【中文标题】如何在检查 CSS 位置后解决 Safari 9.1 转换剪辑路径的问题？

【英文标题】：How to fix Safari 9.1 issue with transitioning clip-path after checking CSS position?

【发布时间】：2016-09-14 00:29:41

【问题描述】：

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

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

您可以在@ 987654322（下面转载）中查看此行为。在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'));

【参考方案1】：

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

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