FF25 和 IE10 中的内联 SVG 上的 1 像素（或更少？亚像素？）边框，而不是 Chrome

Posted 2023-03-06

【中文标题】FF25 和 IE10 中的内联 SVG 上的 1 像素（或更少？亚像素？）边框，而不是 Chrome

【英文标题】：1px (or less? subpixel?) border on inline SVG in FF25 and IE10, not Chrome

【发布时间】：2013-11-21 03:24:29

【问题描述】：

我在使用内联 SVG 时遇到了一个奇怪的问题。我正在<svg> 元素中创建路径，并使用top 或bottom CSS 属性和relative 定位将此SVG 叠加在前一个元素上，以在该部分上获得很酷的“剪切”效果。

这完全适用于 Chrome，但在 IE10 和 FF25 中，我在 SVG 的右侧和顶部获得了这个“透明”边框。我把“透明”放在引号中，因为据我所知它是透明的，因为它显示了它下面的亮绿色背景。这是一个屏幕截图，指向我看到的确切位置（屏幕截图来自 FF25）：

我最初是从Codrops 那里得到分隔符建议的。

Test Page

在这个测试页面中，标题为“SVG Trouble Section”的部分就是有问题的部分。

有没有办法缓解这个问题，所以我的技术可以跨浏览器正常工作？或者有没有更好的方法来达到我想要的效果？谢谢！

---

更新 1： 通过更多的测试，我发现有时在 Firefox 中滚动时，顶部幻影“边框”消失并且不再返回。即使在重新加载页面之后。我不确定是什么导致它消失了，这不是问题的一部分，只是异常。

更新 2： 我通过删除元素进行了一些额外的测试，以查看可能触发此问题的原因，在删除 cmets、“SVG 故障部分”上方的几个部分和页脚之后，边框现在已移至底部分隔符。这是没有页脚的页面：http://ignitepixels.com/sandbox/svg/sample.html

更新 3： 我创建了一个小提琴，在其中复制了这个问题。这应该使故障排除更容易：http://jsfiddle.net/fmpeyton/NuneR/

由于您无法在 jsfiddle 中保存特定的面板尺寸，因此我附上了一张大致尺寸的屏幕截图，我能够使用 Firefox 25 重现此问题： 可能与更新 1 相关，该问题也会根据窗口宽度显示/消失。

【问题讨论】：

1+ 在 FF 中测试.. 跨浏览器的不一致太多了。 ಠ_ಠ

感谢您的测试！我很高兴它发生在其他用户的浏览器上，而不仅仅是我的。

当我缩放（ctrl + 滚动）时，“边框”的 with 会发生变化，所以我猜这是像素舍入错误。一种似乎可行的解决方法是将描边宽度设置为 5 并将描边设置为白色

【参考方案1】：

我在使用 tween-maxjs 的 svg 图形上遇到了类似的问题。只有在 chrome 中我有一个闪烁的边框。我尝试了上面推荐的解决方案，但它没有改变任何东西。

于是我找到了这篇文章：Prevent flicker on webkit-transition of webkit-transform

关键是： -webkit-backface-visibility：隐藏；

我希望这能帮助那些在同样问题上苦苦挣扎的人。 干杯:)

【参考方案2】：

我不确定这是舍入错误还是svg 抗锯齿绘制问题，但我在测试中仅发现以下内容在 Firefox 和 IE10 上始终如一地工作 (see example)：

将两个 SVG 路径更改为此

注意在两个地方添加的额外.1

<path class="white" d="M0 100 L50 0 L100.1 100 L100.1 0 L0 0 L0 100 Z"></path>

更改这些元素的top/bottom 偏移量

将偏移量从-20px 更改为-19.5px

将此添加到.separator

    height: 20px;
    overflow: hidden;

我不确定这个解决方案到底有多脆弱。

【讨论】：

看起来很有希望。我在 FF25 和 IE10 中测试了你的小提琴，问题似乎已经解决。我将在我的项目中尝试解决方案并回复您。

我将这种技术应用到我的项目中，它似乎确实有效并解决了我的问题。这可能是获得赏金的答案，但我想让它保持打开状态，以防有答案可以准确解释为什么 FF25/IE10 会以这种方式运行，以及正确、干净、“非 hacky”的解决方法这个。

我将继续将这笔赏金奖励给@ScottS，因为无论如何都会奖励给他。如果有人找到行为不正常的确切原因或解决此问题的非hacky方法，我会很高兴。再次感谢@ScottS！

【参考方案3】：

另一种解决方法是将以下规则添加到 section.green。

border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;

【讨论】：

一个很好的解决方法，但前提是我的背景图像确实是白色的。虽然在这种情况下就是这种情况，但我正在寻找一种允许复杂背景（图像、渐变等）的解决方案

@FillipPeyton：您在绿色部分的 svg 填充了纯白色，因此无论如何它都不适用于复杂的背景。此外，您最好以小提琴或某种我们可以轻松操作以进行测试的形式重现此内容。

确实如此。不知道为什么没有想到。可能一直在考虑页面的另一部分。我会尝试在小提琴中重现。

@ScottS，我已经在小提琴中重现了这个问题。请参阅原始问题中的Update 3。