Javascript SVG背景图像渲染中的Chrome问题

问题开始于上一次Chrome更新，从那时起图像被裁剪，只是没有正确渲染，但不是所有的，只是一些。 我是这样使用它们的：

.ch-info > div {
  text-align: center;
  display: block;
  position: absolute;
  width: 100%;  
  height: 105%;
  border-radius: 50%;
  background-position: center center;
  -webkit-transition: all 0.4s linear;
  -moz-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  -ms-transition: all 0.4s linear;
  transition: all 0.4s linear;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

在

div

中，我有一个提供背景图像的类

.img-1 { 
  background-image: url(../images/icons/name.svg);
  background-size:cover;
}

我不知道如何修理它。我已经看到在图片上应用固定大小可以解决这个问题，但是相同大小的图片并不适用于所有图片，我想知道问题出在哪里。我想这可能与更新后CSS属性工作方式的变化有关，但这只是一个理论

---

这只发生在Chrome上

在您提供问题的解决方案之前，我们实际上可以体验到错误并尝试可能的解决方案，您获得帮助的机会非常低。谢谢，我添加了一个没有帮助的类作为家长。到目前为止，您发布的代码肯定是“最小”的，但它几乎不“完整”或“可验证”。事实上，这并不是一个“例子”。你应该考虑在片段中复制bug。顺便说一下，“父”是完全混乱的。从中唯一清楚的是，有人在不理解原理的情况下，拼命地试图在水平和垂直方向上居中。很多代码都是无用的，其中一部分显然是错误的。例如，当一个元素的宽度设定为100%时，将其水平居中是绝对没有意义的。你在@AndreiGheorghiu度过了糟糕的一天吗？也许你想重新考虑一下你的评论的语气？在你提供你的问题的答案之前，我们实际上可以体验到错误并尝试可能的解决方案，你获得帮助的机会很低。谢谢你，我添加了一个没有帮助的作为家长的课程。到目前为止，您发布的代码肯定是“最小”的，但它几乎不“完整”或“可验证”。事实上，这并不是一个“例子”。你应该考虑在片段中复制bug。顺便说一下，“父”是完全混乱的。从中唯一清楚的是，有人在不理解原理的情况下，拼命地试图在水平和垂直方向上居中。很多代码都是无用的，其中一部分显然是错误的。例如，当一个元素的宽度设定为100%时，将其水平居中是绝对没有意义的。你在@AndreiGheorghiu度过了糟糕的一天吗？也许你想重新考虑一下你评论的语气？