我发现一个随机改变网站中div位置的脚本在Safari浏览器中无法正常工作。我可以看到元素样式位置在检查时被实时更新，但是位置的变化没有在dom中呈现。
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
function moveRandom(obj) {
/* get container position and size
* -- access method : cPos.top and cPos.left */
var cPos = $('.sphere-move-container').offset();
var cHeight = $('.sphere-move-container').height();
var cWidth = $('.sphere-move-container').width();
// get box padding (assume all padding have same value)
var pad = parseInt($('.sphere-move-container').css('padding-top').replace('px', ''));
// get movable box size
var bHeight = obj.height();
var bWidth = obj.width();
// set maximum position
maxY = cPos.top + cHeight - bHeight - pad;
maxX = cPos.left + cWidth - bWidth - pad;
// set minimum position
minY = cPos.top + pad;
minX = cPos.left + pad;
// set new position
newY = randomFromTo(minY, maxY);
newX = randomFromTo(minX, maxX);
obj.animate({
top: newY,
left: newX
}, 10000, function() {
moveRandom(obj);
});
}
$('.category-sphere-container').each(function() {
moveRandom($(this));
});脚本在chrome，firefox等中呈现。我一直无法确定如何编辑脚本，使其在Safari中工作。任何帮助都是非常感谢的。
1条答案
按热度按时间eufgjt7s1#
一个可能的解决方案是将
transform: translate3d(0,0,0)CSS属性添加到动画元素中。这是一个已知的解决Safari的渲染问题的CSS动画和过渡。为此，可以修改
moveRandom函数，如下所示：注意添加了
obj.css('transform', 'translate3d(' + newX + 'px, ' + newY + 'px, 0)');，它使用transform属性设置元素的新位置。还要注意的是，我们现在使用
setTimeout()而不是obj.animate()，每10秒重复调用moveRandom()。这是因为在某些Safari版本中，animate()不能与transform属性一起使用。最后，确保将以下CSS添加到您想要动画的元素中：
这将修复Safari中的渲染问题。