Safari Absolute Positioning via Javascript

Safari Absolute Positioning via Javascript

本文关键字：Javascript via Positioning Absolute Safari      更新时间：2023-09-26

我正在创建一个车轮选择器，用于根据心情选择鸡尾酒。它使用图像映射，当将鼠标悬停在特定区域上时，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;
}

.mood-selector有一个position: absolute;.知道为什么绝对定位在 Safari 中不起作用吗？提前感谢您的帮助！

将absolute position和transform组合在一起的已知问题。

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

我在 Safari 上遇到了同样的问题并在 Chrome 上工作，并找到了两种解决方案，您可以将indicator分解为两个元素，父元素用于位置，子元素用于转换，或者您可以在 transform 中添加translateZ(0)，即 '-webkit-transform' : rotate(169deg) translateZ(0) .

相关文章：