通过 Javascript 进行 Safari 绝对定位答案

【问题标题】：Safari Absolute Positioning via Javascript通过 Javascript 进行 Safari 绝对定位
【发布时间】：2012-05-10 01:48:18
【问题描述】：

我正在创建一个轮子选择器，用于根据心情选择鸡尾酒。它使用图像地图，当悬停在特定区域上时，会出现由 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 中不起作用？提前感谢您的帮助！

【问题讨论】：

“不工作”是什么意思？究竟会发生什么？请更好地解释一下自己
在这里工作。你确定有错误吗？
感谢您的浏览。我在我的 Mac、我的同事 Mac 和 Windows 上都遇到了这个问题，所有这些都在 Safari 中。如果您将鼠标悬停在情绪上并将光标移动到相邻的情绪而不离开滚轮，则 .indicator 会按照 -webkit-transform 中的指定旋转，但不会移动到 JavaScript 中指定的左侧和顶部坐标。
我决定暂时禁用 Safari 中的悬停状态，但我已经在问题中发布了一个新链接，该链接仍然存在 Safari 错误，以防有人能够帮助我解决这个问题.谢谢！

标签： javascript css-position safari

【解决方案1】：

将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)。

【讨论】：