0

私は次の設定をしています：

<div>Element with CSS3 animated height change</div>
<div><a href="#">Link</a></div>

最初の要素の高さの変化を CSS3 トランジションでアニメーション化してから、リンクをクリックします。モバイル Safari では、予想どおり、リンクが半透明のオーバーレイで強調表示されます。Android ブラウザー (テスト済み 2.1、2.2、2.3) では、リンクをクリックできますが、強調表示は行われません。実際には、通常、リンクの古い場所をクリックして押したままにし、そこでタップを強調表示することができます。

デモはこちら: http://jsfiddle.net/bnickel/DmMZN/

Android には、既知の要素の位置に対応する「タッチ ポイント」のレイヤーがありますが、CSS3 アニメーションの後にそれらのポイントが更新されないという欠陥があるようです。タッチポイントが正しく更新されるようにする安全な方法はありますか? コールバックを実行しても問題ありませんwebkitAnimationEnd。

4

1 に答える 1

0

解決策は簡単です。アニメーションの最後に DOM 変更イベントをトリガーするだけです。他のページ要素に影響を与えないほど一般的であるため、以下を使用しています。

function fixTouchLayer() {
    $('<span/>')
        .css({
            position: 'absolute',
            visibility: 'hidden'
        })
        .appendTo(document.body)
        .remove();
}

http://jsfiddle.net/bnickel/DmMZN/5/

于 2012-03-27T15:10:59.560 に答える