iOS端jQuery each()方法返回异常问题排查与解决咨询

问题说明 #

在iOS Safari浏览器及iOS设备上使用jQuery的each()和find()方法时，出现如下异常：

• PC端squareTextWidth能正常返回元素的offsetWidth值
• iOS端无返回值，且squareText[0]显示不存在
• Safari的JS控制台中console.log(squareText)能正常输出DOM对象集合

可能原因 #

1. DOM渲染时机差异：iOS Safari的DOM渲染优先级与PC端浏览器不同，代码执行时目标元素可能还未完成渲染，导致无法获取有效尺寸。
2. 边界情况未处理：部分.access容器下可能不存在.text元素，iOS环境下该情况暴露了未校验节点存在性的问题。
3. 行内元素尺寸计算规则：.text是<span>行内元素，Safari在元素未处于稳定渲染状态时，不会计算其offsetWidth。

解决方案 #

1. 确保DOM完全加载后执行代码 #

将逻辑放在DOM加载完成的回调中，避免元素未渲染就执行尺寸读取操作。

2. 增加DOM节点存在性校验 #

在访问DOM节点前，先判断jQuery集合是否包含有效元素，防止访问undefined的属性。

3. 强制触发浏览器重排 #

通过读取元素的offsetHeight等属性，强制浏览器计算元素尺寸，确保offsetWidth能返回有效值。

修改后的代码示例 #

JavaScript代码 #

$(document).ready(function() {
  $('div.access').each(function() {
    let squareText = $(this).find('.text');
    // 校验是否存在目标DOM节点
    if (squareText.length > 0) {
      // 强制触发重排，确保尺寸已计算
      squareText[0].offsetHeight;
      let squareTextWidth = squareText[0].offsetWidth;
      console.log(squareTextWidth);
    }
  });
});

可选CSS优化（针对行内元素） #

如果.text是行内元素，可添加样式确保Safari能正确计算尺寸：

.text {
  display: inline-block;
}

内容的提问来源于stack exchange，提问作者Xavier C.