css - iOS Safari上的嵌入式SVG的偏心渲染

编辑：删除dev链接，放弃这个问题。
一个星期以来，我一直在试图解决一个看起来很小的渲染问题，我已经用尽了所有的选择，这是我的呼救。我已经读了所有相关的问题，但仍然没有设法解决这个问题。
目标
我的目标是在网页内联呈现一个简单的对称形状的SVG图标。svg位于一个具有背景色和一些填充的包装器中。这就是正确的渲染效果：

上面是chrome中的放大视图，显示的是正确的渲染。请注意图标的位置是否正确，它不会以任何方式偏离中心。
请注意，我特别使用了一个小填充和大对比度的颜色，以形象化的问题，因为这是一个微妙但令人不安的问题。
问题
以上正确的渲染在windows的桌面浏览器（firefox、chrome、edge）以及android的chrome和firefox上是一致的。它只会在ios safari上错误地渲染。下面是一个错误渲染的示例：

以上是一张放大的iphone 6s、ios 11的截图。这是同一页上同一图标的3个实例。请注意每个格式副本偏离中心时的错误。还要注意的是，它在偏离中心的渲染方式上甚至不一致，看起来几乎是随机的。
图标本身
图标本身来自符号。我检查了向量本身以确保它没有间距：

它接触到边界，并在24x24的视图框中进行几何拟合。我检查了这个图标包中的其他一些图标，我面临着与其他图标相同的问题，但只有在iOS Safari中。所以我认为svg本身没有问题。
问题详细信息
关于ios safari行为的更多细节。我在iOS 10和11、iPhone 5、iPhone 6S、iPad Pro 10、“iPad Pro 12”上进行了测试。呈现的不正确性似乎在设备的大小和方向上有所不同。例如，iphone5是唯一一款拥有完美渲染效果的手机，但当它进入横向模式并刷新页面时，却失败了。在ipad上，它几乎总是失败，但它可能与to-way的子像素不同，这取决于屏幕的大小和方向。
这种行为可能暗示了某种尺度效应正在起作用。
坚实的基线
我正在集成这些图标的页面相对复杂，可能有许多因素影响渲染，所以我从一个最小的测试用例开始：
https://codepen.io/fchristant/pen/PQKWww
我在所有ios设备上测试了这个代码笔，它们在任何场景下都能实现完美的渲染，没有偏离中心的问题。请注意，代码笔如何使用像素而不是相对值完全控制渲染：

.icon-wrap {
    display:block;
    background:green;
    margin:0;
    padding:0;
    width:16px;
    height:16px;
    border:1px solid red;
    box-sizing:content-box;
    padding:4px;
    margin-bottom:20px;
}

.myicon {
    display:block;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border:1px solid purple;
    box-sizing:border-box;
}

此外，包装器和svg都是display:block，以避免任何间距问题。
如前所述，这个最小的测试用例工作得很好。这意味着它有可能在mobile safari上正确呈现这个场景。
但是当它整合回我的页面时，它失败了。我花了好几天的时间在我的页面上寻找可能会影响它的条件，现在已经没有选择了。以下是我做过的一些实验：
在svg本身上设置宽度/高度，尽管在css中也有它。似乎无关紧要。
在SVG上尝试不同的PreserveSpectratio值：没有区别
设置svg版本：没有区别
相对/绝对位置变化：无差异
代替宽度/高度：100%，使用硬编码像素：无差异
将其放置在特定的布局容器内或外部（flexbox，grid）：有时会更改渲染，但始终不会正确。
使用元视区值：没有区别
尝试不同的值进行形状渲染：没有区别
我认为这可能是一个亚像素舍入的问题，但从逻辑上讲这是没有意义的。我在任何地方都使用硬编码的可分为2个像素的值。另外，原来的密码笔工作。
底线：在工作的代码笔和我的测试页面之间，有一些竞争条件会触发不正确的呈现，尽管我已经搜索了好几天，还是没有找到它。
测试页面
这是测试页：
[被移除]
它在我的开发服务器上。如果有问题的话，我会尽量在问题活跃的时候继续问下去。您可以在页面的一些缩略图上找到“globe”图标。不幸的是，你只能在一个真正的ios设备上看到这个问题，并且只能尽可能放大。
是的，我知道为了解决这么一个小问题而不遗余力地去解决似乎是荒谬的，但这一次真的把我甩了。一旦你看到它，它就会像拇指一样伸出来。另外，知道Safari可以正确地呈现这一点，如代码笔所示，使我希望这可以解决。
我将非常感谢结构修复。我尝试过一次性修复，例如减少或增加外部布局容器的1倍大小。这些解决方案在一个设备/方向上解决了这个问题，但在其他情况下又产生了新的问题。我希望无论我把这些图标放在什么环境中，都能持续地呈现出来。所有的浏览器都能做到，但不是移动Safari。好吧，safari可以（见codepen），但我正在做的一些事情会导致它表现不好，我不知道它是什么。
编辑：建议用一个css框替换svg，看看这是否也受到了渲染问题的影响。这里有一张这种情况的截图，它完美地呈现了：

所以看起来它确实与svg相关。

最佳答案

好吧，试试这个…
我看到包装span具有width和height等于svg维度。但是你有1倍的填充。不幸的是，这是盲目的，因为我们不能自己测试。试试这个：

.c_observation__indicator--country .c_observation__icon {
  background: #000;
  border-radius: 50%;
  width:25px;
  height:25px;
  padding:1px;
}