我一直试图解决一个看似微小的渲染问题一个星期,并且已经用尽所有选择,这是我的求救之情.我已经阅读了有关SO的所有相关问题,但仍无法解决此问题.
目标
我的目标是在网页上内嵌呈现简单对称形状的SVG图标. SVG位于包装器内部,该包装器具有背景颜色和一些填充.这是正确的渲染看起来像：
以上是Chrome中放大视图的正确渲染内容.注意图标是如何正确定位的,它不以任何方式偏离中心.
请注意,我特意使用小填充和大对比度来显示问题,因为这是一个微妙但令人不安的问题.
问题
上述正确的渲染在Windows(Firefox,Chrome,Edge)上的桌面浏览器以及Android上的Chrome和Firefox中都是一致的.它只在iOS Safari上呈现不正确.这是一个错误渲染的示例：
以上是来自iPhone 6S,iOS 11的放大屏幕截图.这些是同一页面上同一图标的3个实例.请注意每个演绎在偏离中心时的错误方式.还要注意它如何呈现偏离中心的方式甚至不一致,看起来几乎是随机的.
图标本身
图标本身来自Symbolicons.我检查了矢量本身,以确保它没有间距：
它接触边框,几何形状适合24×24的视图框.我在这个图标包中检查了一些其他图标,我遇到了与其他图标相同的问题,但仅限于iOS Safari.所以我不认为SVG本身存在问题.
问题详情
关于iOS Safari行为的更多细节.我测试了iOS 10和11,iPhone 5,iPhone 6S,iPad Pro 10“,iPad Pro 12”.渲染的不正确性似乎与设备的大小及其方向不同.例如,iPhone5是唯一具有完美渲染效果的产品,但是当将其转换为横向模式并刷新页面时,它就会失败.在iPad上,它几乎总是失败但它可以与子像素不同,取决于屏幕的大小及其方向.
这种行为或许暗示某些缩放效果正在起作用.
一个坚实的基线
我正在集成这些图标的页面相对复杂,可能有很多因素影响渲染,所以我从一个最小的测试用例开始：
https://codepen.io/fchristant/pen/PQKWww
我在所有iOS设备上测试了这个codepen,它们可以在任何场景中实现完美呈现,不会出现偏心问题.注意codepen如何使用像素而不是相对值来完全控制渲染：
.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,以避免任何间距问题.
如上所述,这个最小测试用例非常有效.这意味着可以在移动Safari上正确呈现此场景.
然而,当它重新集成到我的页面时,它失败了.我花了几天时间在我的页面中追逐可能会影响它的条件,并且我的选项已经用完了.以下是我尝试过的一些内容：
>在SVG上设置宽度/高度,尽管在CSS中也有.似乎并不重要.
>在SVG上为preserveAspectRatio尝试不同的值：没有区别
>设置SVG版本：没有差异
>位置相对/绝对的变化：没有区别
>而不是宽度/高度：100％,使用硬编码像素：没有区别
>将其放置在特定的布局容器或外部(flexBox,网格)：有时会更改渲染,但仍然永远不会一致地纠正.
>使用元视口值：没有区别
>为形状渲染尝试不同的值：没有区别
我认为这可能是一个子像素舍入问题,但从逻辑上讲这没有任何意义.我到处都使用硬编码的可分割2像素值.另外,原始的codepen工作.
结论：在工作的代码笔和我的测试页之间,有一些竞争条件触发了错误的渲染,尽管经过了几天的搜索,我还没有找到它.
它在我的开发服务器上.如果有问题,我会尽力保持这个问题.您可以在页面上的某些缩略图上找到“globe”图标.不幸的是,您只能在真实的iOS设备上看到问题,并且只能尽可能地放大.
是的,我知道为解决这么小的问题付出极大的努力似乎很荒谬,但这个真的让我失望了.一旦你看到它就会像拇指一样伸出来.另外,知道Safari可以正确渲染它,如codepen中所示,这让我有希望解决这个问题.
我非常感谢结构修复.我已经尝试过一次性修复,例如通过在外部布局容器上减少或增加1px的大小.这些解决方案在一个设备/方向上解决它,但在其他方案中产生新问题.我希望无论在哪种情况下我都会提供这样的图标.所有浏览器都可以做到,但不是移动Safari.好吧,Safari可以(参见codepen),但我正在做的事情会导致它表现得很糟糕,我不知道它是什么.
编辑：建议是用一个CSS框替换SVG,看看这是否也会受到渲染故障的影响.这是这种情况的截图,它完美呈现：
所以看起来它确实与SVG有关.
我看到包裹跨度的宽度和高度等于svg尺寸.但是你有1px填充.不幸的是,这是盲人,因为我们无法自己测试.试试这个：
.c_observation__indicator--country .c_observation__icon {
background: #000;
border-radius: 50%;
width:25px;
height:25px;
padding:1px;
}
