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

回答

相关问题