html - 如何防止高像素比设备(视网膜)上的半像素 SVG 偏移？

Question

我有一个带有 SVG 图像的 HTML 网页。当我使用 iOS Safari 或 Android 浏览器访问网页时，出现问题(多余的白线，如下图所示)。屏幕截图分辨率为 2 倍，锯边为 SVG 图像。

我发现当 SVG 图像的页面 Y 位置不是整数个 CSS 像素 (px)，即 ½px。浏览器在呈现网页时将 SVG 图像位置舍入为整数 px 而不会舍入其他元素位置。这就是 ½px 行出现的原因。

您可以使用下面的代码片段(或 this CodePen)重现该问题。您应该在具有高像素密度的设备上运行代码段。如果您进入响应式设计模式并选择 iPhone 或 iPad，您也可以在桌面 Safari 中重现它。

.common-bg {
  background: #222;
  fill: #222;
}
.block {
  max-width: 300px;
  margin: 20px auto;
}
.block_content {
  height: 50.5px;
}
.block_edge {
  display: block;
}

<div class="block">
  <div class="block_content common-bg"></div>
  <svg
    class="block_edge"
    width="100%"
    height="10"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <defs>
      <pattern id="sawPattern" x="50%" width="20" height="10" patternUnits="userSpaceOnUse">
        <path d="M 0 0 L 10 10 L 20 0 Z" class="common-bg"/>
      </pattern>
    </defs>
    <rect x="0" y="0" width="100%" height="10" fill="url(#sawPattern)"/>
  </svg>
</div>

如何防止 ½px SVG 在 iOS Safari 和 Android 浏览器上偏移？这是一个错误吗？我应该向 WebKit 开发人员报告它吗？也许有一种方法可以让浏览器舍入 px 页面上的其他元素？

我可以在不阻止 ½px 偏移的情况下解决这个问题:

• 移除.block_content的非整数高度>
• 制作这样的布局，其中半像素移动不会导致 while 行

但我想知道是否有一种方法可以防止 ½px 偏移，因为上述解决方案并不总是可行。

Answer 1

iOS:您只需向 SVG 元素添加任何 CSS 转换即可在 Safari 中修复它。例如.block_edge {-webkit-transform: scale(1); transform: scale(1)} .

Android:首先，您需要向 SVG 元素添加一个微小的 CSS 缩放转换。当你这样做时，<svg>和 <rect>元素将在它们必须出现的位置呈现，但 <rect>背景将在顶部和底部重复:

要修复它，您需要将图案扩展到顶部和底部以防止背景重复。然后你需要添加一个填充的<rect>就在 SVG 顶部的上方，以删除顶部的最后一个空白行。 Android 浏览器顶部仍然会留下一条几乎看不见的深灰色线。

.common-bg {
  background: #222;
  fill: #222;
}
.block {
  max-width: 300px;
  margin: 20px auto;
}
.block_content {
  height: 50.5px;
}
.block_edge {
  display: block;
  
  /* Fix. No more than 5 zeros. */
  -webkit-transform: scale(1.000001);
  transform: scale(1.000001);
}

<div class="block">
  <div class="block_content common-bg"></div>
  <svg
    class="block_edge"
    width="100%"
    height="10"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <defs>
      <pattern id="sawPattern" x="50%" y="-1" width="20" height="12" patternUnits="userSpaceOnUse">
        <path d="M 0 0 L 0 1 L 10 11 L 20 1 L 20 0 Z" class="common-bg"/>
      </pattern>
    </defs>
    <rect x="0" y="-1" width="100%" height="1" common-bg="common-bg"/>
    <rect x="0" y="0" width="100%" height="10" fill="url(#sawPattern)"/>
  </svg>
</div>

The snippet on CodePen

我在移动和桌面 Safari 10、Android 4.4 和 Android 上的 Chrome 58 上对其进行了测试。

结论:修复过于复杂且不可靠，所以我建议制作这样的布局，其中半像素偏移不会导致空行。

.common-bg {
  background: #222;
  fill: #222;
}
.block {
  max-width: 300px;
  margin: 20px auto;
}
.block_content {
  height: 50.5px;
}
.block_edge {
  display: block;
  
  /* Overflow for unexpected translateY */
  margin-top: -1px;
}

<div class="block">
  <div class="block_content common-bg"></div>
  <svg
    class="block_edge"
    width="100%"
    height="12"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <defs>
      <!-- The teeth pattern is extended to the top -->
      <pattern id="sawPattern" x="50%" width="20" height="12" patternUnits="userSpaceOnUse">
        <path d="M 0 0 L 0 1 L 10 11 L 20 1 L 20 0 Z" class="common-bg"/>
      </pattern>
    </defs>
    <rect x="0" y="0" width="100%" height="11" fill="url(#sawPattern)"/>
  </svg>
</div>

The snippet on CodePen