css Safari 16.3(文图拉):背景位置是不正确的,当浏览器被缩放

anhgbhbe  于 2023-04-13  发布在  其他
关注(0)|答案(1)|浏览(102)

bounty还有5天到期。回答此问题可获得+50声望奖励。Kasheftin希望引起更多关注此问题。

下面是演示: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放大时的样子:

一个简单的屏幕截图测量显示,背景大小的变化正确,但背景偏移量没有放大。我正在寻找任何解决办法/破解,以克服这个问题。

相关问题