Html 手机上的背景图像显示不正确

我使用svg作为我的html站点的背景。它在大多数台式机和一些像android上的Chrome这样的浏览器上运行良好，但在其他浏览器中，图像下方有一个奇怪的白色空白区域。知道为什么会这样吗？这就是我的意思-

这是我现在的风格。任何帮助都将不胜感激

html{
背景：url（'Bubble.svg'）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
高度：100vh；
溢出：隐藏；
-webkit触摸标注：无；
-webkit用户选择：无；
-webkit点击突出显示颜色：透明；
}
身体{
高度：100vh；
保证金：0；
显示：网格；
放置项目：中心；
字体大小：10px；
}

---

它在Chrome上完全可以正常工作，但在firefox mobile上会向右和向下偏移，在edge mobile上也不能正常显示。

尝试添加100%而不是中间。 我建议将背景图像添加到正文中的容器中，而不是添加到html中。将内容包装在一个div中，并向其中添加图像

.bgImg{
背景：url（'https://www.w3schools.com/howto/img_forest.jpg’）100%100%不重复；
背景尺寸：封面；
身高：100%；
宽度：100%；
最小高度：100vh；
}