在IOS上方和下方有巨大空间的SVG图像渲染

Question

我为客户端网站制作了可点击的SVG国家/地区地图，我在IOS设备上显示的方式存在一些问题。

在Android或桌面上的所有浏览器上，图像位于上方的选项菜单中（在纵向下方和横向侧面），如下图所示。

风景：

人像：

然而，在IOS中，SVG图像似乎有100个像素的边距或填充，这意味着用户必须在页面上向下滚动才能看到它。在IOS中呈现SVG图像是否存在某种形式的问题（如果有的话，它不会让我感到惊讶）。如果是这样，是否有一种解决方法可以像在所有其他浏览器中一样正确显示它？

我在SVG标签上的设置如下：

<svg viewBox="0 0 1056 1062" preserveAspectRatio="xMidYMid meet">

在IOS设备上发生这种情况的页面是：

http://lostworldadventures.axumdev.com/destinations/

非常感谢任何帮助。

N.B。 SVG嵌入到我的HTML结构中，不通过图像标记呈现

Answer 1

好的，所以经过一些阅读后，似乎有一个CSS黑客被称为1％的黑客将解决这个问题。基本上，如果使用CSS将SVG元素的高度设置为1％，则间距将消失，SVG将在正确的位置呈现。

到目前为止，我已经在所有现代桌面和移动浏览器上对此进行了测试，看起来效果很好。