Safari 16.3 (Ventura): background-position is incorrect when browser is zoomed

Question

Here's the demo: 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>

Basically, several divs with backgrounds and background-position: 0 0 placed one on top of each other. background-size has a value like 48, 96, 144, etc. meaning they should overlay evenly.

It works correctly in Chrome and in Safari 14.1 and 15.6, but there's an issue in the latest Safari 16.3 which happens only when the browser zoom is not 100%. That's how it looks when Safari 16.3 is zoomed in:

A simple screenshot measurement shows that the background size changes correctly, but the background offset is not zoomed in. I'm looking for any workaround/hack to overcome the issue.

Answer 1

Try using rem or em instead of px.