Safari 16.4+ 动态 CSS 属性解析异常及零值处理策略

Safari 16.4 及 iOS 16.4 更新后，在动态设置 CSS 属性时，特别是 background-position 包含 0% 值时，会出现属性值被意外省略或修改的问题。本文深入分析了这一现象，并提供了一种通过为零值添加微小偏移量（epsilon）的有效解决方案，确保样式在最新 Safari 浏览器中正确渲染，同时探讨了 background-size 属性的规范行为。

Safari 16.4+ CSS 动态设置异常解析

在 web 开发中，通过 javascript 动态设置 css 属性是常见操作。然而，自 safari 16.4 和 ios 16.4 更新以来，部分开发者发现其原有代码在处理 background-size 和 background-position 等属性时出现了异常行为。

具体表现为：

1. background-size 属性：当仅设置一个值（如 300%）时，Safari 16.4 会自动在其后添加 auto，例如将 background-size: 300%; 解析为 background-size: 300% auto;。这实际上是 CSS 规范的正确行为——当 background-size 只有一个值时，第二个值（高度）默认为 auto。如果开发者期望宽高相等（如 300% 300%），则需要明确指定两个值。
2. background-position 属性：这是导致功能异常的核心问题。当 background-position 的某个坐标值（如 xpos 或 ypos）为 0% 时，Safari 16.4 会将其省略，导致该属性只剩下一个值。例如，预期的 background-position: 0% 0%; 在 Safari 16.4 中可能被解析为 background-position: 0%;。

以下是出现问题的典型代码片段：

// 假设 gridSize, xpos, ypos 已在代码中预先设置
// xpos 和 ypos 可能是 '0%', '50%', '100%' 等字符串
var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
'background-size': (gridSize * 100) + '%', // 例如 '300%'
'background-position': xpos + ' ' + ypos,   // 例如 '0% 0%'
});

在 Safari 16.4 中，对 li 元素进行检查时，可能观察到以下不符合预期的样式：

<li data-value="0"></li>

而期望的样式应为：

立即学习“前端免费学习笔记（深入）”；

<li data-value="0"></li>

需要强调的是，这种行为仅在 iOS 16.4（包括移动端 Chrome 和 Safari）和 macOS Safari 16.4 上出现，在其他 Android、PC 设备以及更早的 iOS 或 Safari 版本上均表现正常。

问题根源与尝试分析

为了解决这一问题，开发者进行了多项尝试：

1. 分别设置 background-position-x 和 background-position-y：

   var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
   'background-size': (gridSize * 100) + '%',
   'background-position-x': xpos,
   'background-position-y': ypos,
   });

   然而，这种方法仍然导致 background-position 属性在检查器中显示为单个值，未能解决问题。

2. 手动硬编码 background-position 值：
   为了排除变量拼接的问题，尝试直接将 0% 0% 等值硬编码到 CSS 属性中。

   if (gridSize == 3) {
   if (i==0) {
   li.css('background-position', '0% 0%');
   } // ... 其他条件
   }

   令人困惑的是，即使手动设置为 ‘0% 0%’，Safari 16.4 依然会选择性地省略 0% 值，尤其是在 x 或 y 坐标为 0% 的情况下。例如，0% 50% 可能变为 50%，而 50% 0% 可能变为 50%。这表明 Safari 16.4 对 0% 这个绝对零值进行了某种“优化”处理，导致其在某些上下文中被错误地解析或省略。

解决方案：零值微小偏移策略

经过反复测试，一种有效的解决方案被发现：为 background-position 中可能为 0% 的值添加一个极小的非零偏移量（epsilon）。这可以“欺骗”Safari 浏览器，使其不再将这些值识别为绝对零，从而避免其内部的“优化”逻辑。

核心思想是：如果 xpos 或 ypos 的字符串值为 ‘0%’，则将其替换为 ‘0.000001%’。这个微小的数值在视觉上几乎无法察觉，但足以改变浏览器对该值的解析方式。

以下是修改后的代码示例：

// 假设 xpos 和 ypos 是字符串，如 '0%', '50%', '100%'
let adjustedXpos = xpos;
let adjustedYpos = ypos;
// 对 '0%' 值进行微调，避免 Safari 的优化行为
if (xpos === '0%') {
adjustedXpos = '0.000001%';
}
if (ypos === '0%') {
adjustedYpos = '0.000001%';
}
var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
// 如果 background-size 需要等比例缩放，建议明确指定两个值，例如 '300% 300%'
// 否则，'300%' 默认解析为 '300% auto' 是符合 CSS 规范的
'background-size': (gridSize * 100) + '%',
'background-position': adjustedXpos + ' ' + adjustedYpos,
});

应用此修改后，Safari 16.4+ 将能够正确解析 background-position 属性，并保留所有预期值，从而恢复应用的正常功能。

注意事项与最佳实践

1. 浏览器兼容性测试：此案例再次强调了在 Web 开发中进行全面浏览器兼容性测试的重要性，尤其是在浏览器大版本更新后。不同浏览器或同一浏览器的不同版本可能对 CSS 规范有不同的解释或存在特定的渲染缺陷。
2. “Epsilon”技巧的局限性：为零值添加微小偏移量是一种针对特定浏览器 bug 的临时性或“hacky”解决方案。它并非通用的最佳实践，但在面对难以解决的浏览器渲染问题时，可以作为有效的应急手段。
3. 动态 CSS 属性调试：在动态设置 CSS 属性时，务必利用浏览器开发者工具检查元素的“计算样式”或“Computed”选项卡。这可以帮助您了解浏览器实际如何解析和应用您的样式，从而发现潜在的问题。
4. background-size 规范理解：对于 background-size 属性，如果仅提供一个值（如 300%），CSS 规范规定第二个值（高度）默认为 auto。因此，Safari 16.4 将 300% 解析为 300% auto 是符合规范的。如果您的设计意图是宽高相等（例如 300% 300%），则应明确指定两个值，避免依赖浏览器的默认推断。

总结

Safari 16.4 及 iOS 16.4 更新带来的动态 CSS 属性解析异常，特别是对 background-position 中 0% 值的特殊处理，给依赖精确样式渲染的 Web 应用带来了挑战。通过为零值添加一个微小的非零偏移量，可以有效规避这一浏览器特定的“优化”行为，确保样式能够正确渲染。此案例也提醒开发者，在 Web 开发的复杂环境中，面对浏览器特有行为时，深入调试、理解规范以及灵活运用解决方案至关重要。同时，持续关注浏览器更新日志和社区讨论，有助于及时发现并解决潜在的兼容性问题。