Safari 16.3(Ventura)缩放时background-position异常求解决方案

问题说明 #

多个叠加的绝对定位div均设置background-position: 0 0，各自background-size设为48px、96px、144px等不同值，预期背景线条应与下方对应宽度的灰色方块完全对齐。
该效果在Chrome、Safari 14.1/15.6中表现正常，但在Safari 16.3（Ventura）浏览器缩放比例非100%时出现异常：背景尺寸缩放正常，但背景定位未同步缩放，导致线条与方块错位。

演示代码 #

HTML #

<div class="container">
  <div class="bg1"></div>
  <div class="bg2"></div>
  <div class="bg3"></div>
  <div class="bg4"></div>
  <div class="sq1"></div>
  <div class="sq2"></div>
  <div class="sq3"></div>
  <div class="sq4"></div>
  <div class="sq5"></div>
</div>

CSS #

.container {
  position: relative;
  width: 500px;
  height: 180px;
  border: 1px solid #000;
}

.bg1, .bg2, .bg3, .bg4 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: 0 0;
}

.bg1 {
  background: linear-gradient(90deg, transparent 0 47px, #ddd 47px 48px, transparent 48px 100%);
  background-size: 48px 1px;
}

.bg2 {
  background: linear-gradient(90deg, transparent 0 95px, #f00 95px 96px, transparent 96px 100%);
  background-size: 96px 1px;
}

.bg3 {
  background: linear-gradient(90deg, transparent 0 143px, #0f0 143px 144px, transparent 144px 100%);
  background-size: 144px 1px;
}

.bg4 {
  background: linear-gradient(90deg, transparent 0 335px, #000 335px 336px, transparent 336px 100%);
  background-size: 336px 1px;
}

.sq1, .sq2, .sq3, .sq4, .sq5 {
  position: absolute;
  top: 0;
  left: 0;
}

.sq1 {
  width: 48px;
  height: 24px;
  background-color: #ccc;
}

.sq2 {
  top: 30px;
  width: 96px;
  height: 24px;
  background-color: #ccc;
}

.sq3 {
  top: 60px;
  width: 144px;
  height: 24px;
  background-color: #ccc;
}

.sq4 {
  top: 90px;
  width: 192px;
  height: 24px;
  background-color: #ccc;
}

.sq5 {
  top: 120px;
  width: 336px;
  height: 24px;
  background-color: #ccc;
}

临时修复方案 #

1. 合并多背景到单个元素 #

将所有背景线条合并到容器元素的多背景渐变中，避免多元素叠加导致的定位偏差：

.container {
  position: relative;
  width: 500px;
  height: 180px;
  border: 1px solid #000;
  background-repeat: repeat-x;
  background-position: 0 0;
  background-image: 
    linear-gradient(90deg, transparent 0 47px, #ddd 47px 48px, transparent 48px),
    linear-gradient(90deg, transparent 0 95px, #f00 95px 96px, transparent 96px),
    linear-gradient(90deg, transparent 0 143px, #0f0 143px 144px, transparent 144px),
    linear-gradient(90deg, transparent 0 335px, #000 335px 336px, transparent 336px);
  background-size: 48px 1px, 96px 1px, 144px 1px, 336px 1px;
}

此时HTML可移除所有.bg*元素，仅保留容器和方块元素。

2. 使用百分比定义渐变断点 #

将背景渐变的断点位置改为百分比计算，确保缩放时比例一致：

.bg1 {
  background: linear-gradient(90deg, transparent 0 calc(97.9167% - 1px), #ddd calc(97.9167% - 1px) 97.9167%, transparent 97.9167%);
  background-size: 100% 1px;
}
.bg2 {
  background: linear-gradient(90deg, transparent 0 calc(98.9583% - 1px), #f00 calc(98.9583% - 1px) 98.9583%, transparent 98.9583%);
  background-size: 100% 1px;
}
.bg3 {
  background: linear-gradient(90deg, transparent 0 calc(99.3056% - 1px), #0f0 calc(99.3056% - 1px) 99.3056%, transparent 99.3056%);
  background-size: 100% 1px;
}
.bg4 {
  background: linear-gradient(90deg, transparent 0 calc(99.7024% - 1px), #000 calc(99.7024% - 1px) 99.7024%, transparent 99.7024%);
  background-size: 100% 1px;
}

百分比由原断点值除以对应背景尺寸计算得出（如47/48≈97.9167%），确保渐变位置随容器等比例缩放。

3. 用transform模拟缩放（可控场景） #

若可避免依赖浏览器自带缩放，通过给容器添加transform: scale()实现缩放，可绕过该bug：

/* 示例：模拟125%缩放 */
.container {
  transform: scale(1.25);
  transform-origin: top left;
}

4. JS动态补偿定位偏差 #

监听浏览器缩放事件，动态调整背景定位补偿值：

function fixBackgroundPosition() {
  const viewportScale = window.visualViewport?.scale || 1;
  const scaleFactor = window.devicePixelRatio / viewportScale;
  document.querySelectorAll('.bg1, .bg2, .bg3, .bg4').forEach(el => {
    const computed = getComputedStyle(el);
    const [bgWidth] = computed.backgroundSize.split(' ').map(Number);
    const actualBgWidth = bgWidth * scaleFactor;
    // 计算偏差并调整定位，可根据实际情况微调offset值
    const offset = (actualBgWidth - bgWidth) * 0;
    el.style.backgroundPosition = `${offset}px 0`;
  });
}

window.addEventListener('resize', fixBackgroundPosition);
window.addEventListener('scroll', fixBackgroundPosition);
fixBackgroundPosition();

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