Safari下CSS background-color仅在特定窗口尺寸生效的样式异常问题

问题现象 #

• Microsoft Edge浏览器下网站显示效果正常：
  
• 桌面端Safari 15.5版本默认大窗口尺寸下样式显示异常：
  
• Safari窗口缩小至特定宽高阈值以下时，样式可正常渲染：
  
• iOS端Safari下站点运行完全正常。

异常产生原因 #

核心原因是桌面端Safari对根元素的布局计算逻辑和Chromium内核（Edge使用的内核）存在实现差异：

• 直接给html元素设置height: 100%时，桌面端Safari在大窗口场景下不会自动将百分比高度锚定到视口高度，而是优先按页面内容的实际高度计算元素尺寸，导致background-size: cover的覆盖计算基准出错，背景图、半透明混合层的渲染范围不符合预期；当窗口缩小到内容高度大于视口高度时，计算结果刚好匹配预期，因此样式显示正常。iOS端Safari默认将根元素高度锚定到移动端视口，因此不会触发该问题。
• 现有代码中给html设置的margin-top: auto属于非标准用法，根元素的auto外边距在W3C规范中没有明确的统一计算规则，Safari对该属性的解析逻辑和Chromium不一致，大窗口下会触发布局偏移，进一步干扰背景层的渲染。

修复方案 #

将原有CSS代码替换为如下兼容写法即可：

/* 统一全局盒模型，重置浏览器默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  /* 用视口单位固定最小高度，避免Safari百分比高度计算偏差 */
  min-height: 100vh;
  width: 100%;
  background-image: url("images/background.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* 固定背景附着，避免大视口下背景计算偏移 */
  background-attachment: fixed;
  background-blend-mode: overlay;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  /* 移除根元素上不兼容的margin-top: auto */
}
/* 需要页面内容居中时，通过body的flex布局实现，兼容性更稳定 */
body {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

若替换代码后仍存在大窗口下背景混合模式失效的偶发问题，可以给html选择器追加transform: translateZ(0);属性，触发GPU独立层渲染，强制Safari单独绘制背景层即可解决。

内容的提问来源于stack exchange，提问作者Emir Sürmen