ipad/iphone 上的 Flexbox 问题

Question

我需要 IOS 用户的帮助 :) 我最近对几年前建立的网站进行了一些更改。它有一个服装配置器，您可以在其中选择服装、颜色和设计。配置器过去使用 javascript 来计算服装的高度，但情况发生了变化，我决定只使用 CSS：

.kit-template {
    display: flex;
    width: 100%;
    height: 200px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 20px auto;

    .svg-document {
        height: 100%;
        width: 100%;
    }

    svg {
        height: 100%;
        width: 100%;
    }

    &.large {
        height: 500px;
    }
}

如您所见，这使用了 flex 并且看起来非常简单。当我最初构建站点时，flex 不像现在那样受支持。 无论如何，自从这些变化以来，我一直收到关于服装在 iphone/ipad 上看起来不正确的报告。

我花了几个小时尝试配置一个可以使用 safaris 开发工具的虚拟机。 我终于做到了，当我看的时候，它工作得很好，哈哈。所以这似乎只是 iPhone/iPad 上的问题。

这是一个实际示例的链接：

https://www.kudos-sports.com/designer/ideas?kitId=4119

如果您在 iPhone/iPad 上查看它，它看起来是错误的，并且没有应用我的 CSS。 以前有没有人经历过这种情况，或者有人知道问题可能是什么吗？ 我花了太长时间试图让它发挥作用:(

Answer 1

您的 SVG 的问题在于您已将 100% 的宽度应用于它及其容器。

如果你这样做

.kit-template .svg-document, .kit-template svg { width: auto }

这应该可以解决您的问题。