Safari絕對定位通過Javascript

我正在創建一個基於情緒選擇雞尾酒的輪選框。它使用圖像映射，當懸停在特定區域時，會產生由javascript生成的懸停狀態。它適用於Chrome，Firefox和IE9，但我遇到了Safari的問題。絕對定位似乎不適用於我的懸停指標。Safari絕對定位通過Javascript

看到它在這裏的行動： 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; 
}

有上.mood-selector一個position: absolute;。任何想法爲什麼絕對定位不適用於Safari？在此先感謝您的幫助！

來源

2012-05-10 Nick Stevens

你對'不工作'是什麼意思？究竟發生了什麼？請更好地解釋一下自己 –

在這裏工作。你確定有錯誤嗎？ –

感謝您的關注。我在我的Mac，我的同事Mac和Windows中遇到了這個問題，全部都在Safari中。如果將鼠標懸停在心情上並將光標移動到相鄰的心情而不離開輪子，則.indicator將按照-webkit-transform中的指定旋轉，但不會移動到JavaScript中指定的左側和頂部座標。 –

與absolute position和transform結合在一起的已知問題。

見http://code.google.com/p/chromium/issues/detail?id=82225

我遇到同樣的問題，在Safari和Chrome的工作，並發現了兩種解決方案，你可以拆開indicator成兩個元素，父爲位置和孩子轉化，或者你可以在添加translateZ(0)transform，即'-webkit-transform' : rotate(169deg) translateZ(0)。

來源

2012-10-07 01:22:21 floydwch

Safari絕對定位通過Javascript

回答

相關問題