iPhone 7上CSS rgba透明度值被修改为近似值的原因咨询

这其实是浏览器引擎对浮点数精度的处理差异导致的，并非iPhone主动“修改”你的原始CSS代码~

核心原因：浮点数的二进制存储限制 #

咱们平时写的十进制小数0.3，其实没法用二进制浮点数精确表示——它在二进制里是一个无限循环的小数，浏览器只能存储它的近似值。不同浏览器引擎在输出这个近似值时，做了不同的格式化处理：

• 桌面端的Chrome、Firefox等浏览器，会把这个近似值四舍五入成你写的0.3再返回给你；
• 而iPhone 7上的Safari（基于WebKit引擎），则直接返回了更贴近底层存储的近似值0.298039，没有做额外的四舍五入格式化。

WebKit引擎的处理逻辑 #

iOS上的WebKit引擎在解析和计算CSS样式时，会保留浮点运算的原始精度结果，不会刻意对齐开发者写的十进制数值。这不是“修改CSS”，只是引擎在样式值的序列化输出上和其他浏览器不一样而已——实际渲染出来的视觉效果和0.3的透明度几乎没有区别。

解决校验问题的思路 #

如果要校验这个透明度值，不要直接比对字符串，而是把rgba的四个分量拆成数值，做近似比对（允许极小的误差范围）。比如用这段JavaScript代码：

// 解析rgba字符串为数值对象
function parseRGBA(rgbaStr) {
  const match = rgbaStr.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
  if (!match) return null;
  return {
    r: parseInt(match[1]),
    g: parseInt(match[2]),
    b: parseInt(match[3]),
    a: parseFloat(match[4])
  };
}

// 预期的样式值
const expectedRGBA = { r: 14, g: 48, b: 71, a: 0.3 };
// 获取实际计算后的样式
const actualRGBA = parseRGBA(getComputedStyle(document.querySelector('.eventcolor-0')).backgroundColor);

// 做近似比对（误差小于0.001即可认为匹配）
const isMatch = actualRGBA && 
  actualRGBA.r === expectedRGBA.r &&
  actualRGBA.g === expectedRGBA.g &&
  actualRGBA.b === expectedRGBA.b &&
  Math.abs(actualRGBA.a - expectedRGBA.a) < 0.001;

内容的提问来源于stack exchange，提问作者gene b.