Flex + svg 在 ios Safari 14.0.3 中表现异常

Question

所以我有这个简单的标记：

<div class="container">
  <svg>...</svg>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

在 Chrome 上，一切都按预期工作 - svg 位于 .container class

的中心

在 Safari 14.0.3 上，如果我打开检查器并切换属性 显示，浏览器不会呈现 svg : flex 关闭然后重新打开，它显示并按预期工作。

在这种情况下你会使用什么后备方案？

Answer 1

检查 SVG 参考 ID 是否与其他 svgs ID 冲突。 Safari 当您使用相同的 ids 来引用 , 从 svg 定义时，它表现得很奇怪。另一方面，Chrome 不关心您是否在不同的 svg 中使用相同的 id。

Answer 2

在我的例子中，容器元素是一个高度和宽度固定为 32 像素的按钮。对我有用的 - 为它添加填充到 0 - 它有一些来自用户代理样式表的填充，它覆盖了整个内部。虽然它不应该隐藏 svg（仅 iOS 手机），但它确实隐藏了 :)。

Answer 3

将 svg 的宽度和高度设置为 100% 对我来说是固定的。

Flex + svg behaving strange in ios Safari 14.0.3