Safari 16.3 (Ventura)：浏览器缩放时背景位置不正确

Question

这里是演示：https://jsfiddle.net/kasheftin/s9o127r3/6/

.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;
}

<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>

基本上，几个有背景的 div 和

background-position: 0 0

将一个放在彼此之上。

background-size

具有 48、96、144 等值，这意味着它们应该均匀叠加。

它在 Chrome 和 Safari 14.1 和 15.6 中工作正常，但在最新的 Safari 16.3 中存在一个问题，只有当浏览器缩放不是 100% 时才会发生。这就是 Safari 16.3 放大后的样子：

一个简单的屏幕截图测量显示背景大小正确更改，但背景偏移没有放大。我正在寻找任何解决方法/黑客来解决这个问题。

Answer 1

尝试使用 rem 或 em 而不是 px。