在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/

任何帮助将不胜感激.

注意:SVG嵌入到我的HTML结构中,不通过图像标记呈现

Answer 1

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

到目前为止,我已经在所有现代桌面和移动浏览器上测试了它,它似乎工作得很好.