0

Safari 9.1 で動作が見られますが、これは Safari のバグのようですが、コードの問題かどうかを確認するためにここに公開しています。

ユーザーの操作で CSS Shapes ポリゴン クリップ パスを移行するサイトがあります。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'));
4

1 に答える 1

0

The workaround I'm going with is separating the clip-path and the element I need to do the position evaluation on. I clip-path an outer div and let the plugin chew on the inner div. I thereby avoid the whole issue.

However, I'd love an answer that doesn't require adding an extra element.

于 2016-05-18T19:20:30.503 に答える