0

気分に基づいてカクテルを選択するためのホイール セレクターを作成しています。イメージ マップを使用し、特定の領域にカーソルを合わせると、javascript によって生成されたホバー状態になります。Chrome、Firefox、IE9 では問題なく動作しますが、Safari では問題が発生します。絶対位置がホバー インジケーターに適用されていないようです。

ここで動作を確認してください: http://thehoochlife.com/mood-selector-test/

イメージ マップの領域にホバー状態を作成するために使用する JavaScript の例を次に示します。

function overStubborn() {
indicator.css({
    'display' : 'block',
    'left' : '227px',
    'top' : '54px',
    '-webkit-transform' : 'rotate(169deg)',
    '-moz-transform' : 'rotate(169deg)',
    '-ms-transform' : 'rotate(169deg)',
    '-o-transform' : 'rotate(169deg)',
    'transform' : 'rotate(169deg)'
});
indicator.on('click', function() {
    jQuery('#stubborn').click();
    return false;
});
}

.indicator 要素の CSS は次のとおりです。

.mood-selector .indicator {
cursor: pointer;
display: none;
height: 27px;
position: absolute;
z-index: 100;
}

ありposition: absolute;ます.mood-selector。絶対配置が Safari で機能しない理由はありますか? よろしくお願いします。

4

1 に答える 1

0

absolute position結合と結合に関する既知の問題transform。

http://code.google.com/p/chromium/issues/detail?id=82225を参照してください

私はSafariで同じ問題に遭遇し、Chromeで作業し、2つの解決策を見つけました。indicator位置の親と変換の子の2つの要素に分解translateZ(0)するかtransform、'-webkit-transform' : rotate(169deg) translateZ(0).

于 2012-10-07T01:22:21.373 に答える