如何让随机移动Div的JavaScript脚本在Safari浏览器正常工作？

核心问题分析 #

你的脚本在Safari里失效，主要是两个原因：

• 移动元素未设置正确的定位属性：默认的静态定位（position: static）下，top/left属性不会触发视觉位置变化，Chrome/Firefox做了兼容处理，但Safari严格遵循标准。
• jQuery动画的位置值缺省单位：Safari对无单位的数值解析存在问题，即便DOM的style属性显示更新，也不会触发页面渲染。

修复步骤 #

1. 给移动元素添加定位CSS
   确保.category-sphere-container的CSS包含定位规则，同时父容器.sphere-move-container建议设置相对定位，让子元素基于父容器定位：

   .sphere-move-container {
       position: relative;
   }
   .category-sphere-container {
       position: absolute; /* 根据布局需求，也可使用relative */
   }
   

2. 修改脚本：补全单位+修复变量声明
   原脚本中maxY、maxX等变量未声明，会变成全局变量引发潜在冲突；同时给动画的top/left值添加px单位，让Safari正确解析。修改后的代码如下：

   function randomFromTo(from, to){
       return Math.floor(Math.random() * (to - from + 1) + from);
   }
   
   function moveRandom(obj) {
       // 获取容器位置和尺寸
       var cPos = $('.sphere-move-container').offset();
       var cHeight = $('.sphere-move-container').height();
       var cWidth = $('.sphere-move-container').width();
       
       // 获取容器内边距（假设上下左右内边距一致）
       var pad = parseInt($('.sphere-move-container').css('padding-top').replace('px', ''));
       
       // 获取移动元素的尺寸
       var bHeight = obj.height();
       var bWidth = obj.width();
       
       // 声明局部变量，避免全局污染
       var maxY = cPos.top + cHeight - bHeight - pad;
       var maxX = cPos.left + cWidth - bWidth - pad;
       var minY = cPos.top + pad;
       var minX = cPos.left + pad;
       
       // 生成新位置
       var newY = randomFromTo(minY, maxY);
       var newX = randomFromTo(minX, maxX);
       
       obj.animate({
           top: newY + 'px', // 添加px单位
           left: newX + 'px'
       }, 10000, function() {
           moveRandom(obj);
       });
   }
   
   $('.category-sphere-container').each(function() {
       moveRandom($(this));
   });
   

额外排查点 #

如果修复后仍无效果，可尝试在动画回调中强制触发Safari重绘（比如给元素临时添加/移除一个空样式类），但多数情况下上述修复即可解决问题。

内容的提问来源于stack exchange，提问作者Sean