Safari 在使用 flexbox 居中时不显示 SVG

Posted 2023-03-28

【中文标题】Safari 在使用 flexbox 居中时不显示 SVG

【英文标题】：Safari does not display SVG when using flexbox to center it

【发布时间】：2021-06-21 23:51:50

【问题描述】：

我遇到了 Safari、SVG 和 flexbox 的问题

我们的目标是拥有一个响应式 SVG，保持纵横比 (16:9)。此外，SVG 应该始终位于屏幕的垂直和水平中心。以下代码适用于除 Safari 之外的所有浏览器...我尝试了不同的供应商前缀，但我不知道为什么 SVG 没有显示...有什么想法吗？

您可以在下面的代码 sn-p 中测试有缺陷的行为。 Safari 将显示一个空白页面。其他浏览器将显示一个 16:9、始终居中的蓝绿色矩形。

* 
  margin: 0;
  padding: 0;
  overflow: hidden;


body 
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;


svg 
  background-color: teal;
  max-height: 100vh;

<svg viewBox="0 0 1920 1080">
</svg>

更新

只是一些澄清。根据视口的纵横比，SVG 位于水平中心或垂直中心。只有当屏幕纵横比正好为 16:9 时，它才会匹配 SVS 的 viewBox（请参阅viewBox="0 0 1920 1080"），并且它会显示没有任何边框（信箱）。这是我的目标，解决方案应该适用于所有浏览器——不管它是如何完成的。

【问题讨论】：

尝试使用 flex 而不是 max-height，例如 flex: 0 0 100vh;

可以重现，一种解决方法是将height和width属性设置为1920和1080，然后通过CSS将其覆盖为auto。

@enxaneta，没有。我失去了水平响应能力，并且我在侧面得到了一些填充：jsfiddle.net/akdu6qep

@Kaiido SVG的宽高属性？

我相信@Kaiido 的意思是按照他的建议设置宽度和高度。然后通过将它们都设置为100% 在 CSS 中覆盖它们。这相当于根本不设置它们。

【参考方案1】：

这是一个普通的 CSS 示例 ...

它是使用 CSS 函数 min(...) 和 var(...) 以现代样式技术完成的。由于样式是针对全尺寸视图屏幕完成的，因此可以根据 svg/图像的aspect-ratio 和实际的vW 和vHunits 计算尺寸。现代居中也是使用flexbox 完成的。

它应该在所有现代浏览器中运行。

请查看示例：

* 
  margin: 0;
  padding: 0;
  overflow: hidden;


body 
  height: 100vH;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;


svg 
  --aspectRatio: 1.7777777;
  width: min(100vW, (100vH * var(--aspectRatio)));
  height: min(100vH, (100vW / var(--aspectRatio)));
  background-color: teal;

<svg viewBox="0 0 1920 1080"></svg>

【讨论】：

干得好！供应商前缀甚至不是必需的。所以，不是max-height——这对 Safari 来说是个问题——你给出一个明确的计算 width 和 height，这对 Safari 来说很好……你知道为什么我的原始代码在 Safari 上失败了吗？无论如何，非常高兴有一个 CSS 解决方案。不幸的是，我不能撤销或分割赏金。谢谢！

感谢反馈。正如我所指出的：因为它还没有及时赏金当然可以！但是谢谢你选择答案:-)

【参考方案2】：

这里是基于 javascript 的解决方案：

const svg = document.querySelector("svg");
const wByH = 16 / 9;

function computeSVGDimen() 
  const width = window.innerWidth;
  const height = window.innerHeight;

  const currentRatio = width / height;

  const computedWidth = height * wByH;
  const computedHeight = width * (1 / wByH);

  if (currentRatio < wByH) 
    svg.style.width = `$widthpx`;
    svg.style.height = `$computedHeightpx`;
   else 
    svg.style.width = `$computedWidthpx`;
    svg.style.height = `$heightpx`;
  


computeSVGDimen();
window.onresize = computeSVGDimen;

* 
  margin: 0;
  padding: 0;
  overflow: hidden;


body 
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;


svg 
  background-color: teal;

<svg viewBox="0 0 1920 1080"></svg>

【讨论】：

感谢您的努力！这确实是 Safari 的有效解决方案。然而，它需要一些 JavaScript 实在是太可惜了。如果没有 CSS 解决方案，我明天会接受/奖励。再次感谢您的调查！

即使我用 CSS 做了很多尝试，但 Safari 处理所有事情的方式与其他所有浏览器都不同。我在为 Safari 修复小事时度过了一段可怕的时光。我希望有人提出一个纯 CSS 解决方案，即使我更喜欢那样。

【参考方案3】：

在 .css 文件中使用它

@supports (-webkit-touch-callout: none) svg background-color: teal;

【讨论】：

可以详细说明您的答案；添加您的代码似乎使事情变得更糟：jsfiddle.net/McTell/vj9mpckx/5