div 背景图片和 iOS Mobile Safari 兼容性问题答案

【问题标题】：div background image and iOS Mobile Safari compatibility issuesdiv 背景图片和 iOS Mobile Safari 兼容性问题
【发布时间】：2017-12-29 20:57:52
【问题描述】：

我有一个带有背景图像的 '.home' div，我想将其垂直放入所述 div 中。它在移动设备上完美运行，除了 iPhone 使用 Mobile Safari 浏览。

HTML 代码：

<div id="home" class="home">  <!-- This div has a background image -->
    <div class="overlay sections">
        <div class="container text-center">
            <div class="row">
                <div class="div-menu">
                    <header class="cd-header">
                        <div id="cd-logo">
                            <a href="index.html"><img id="logo-animated" src="assets/images/logos/vera_sing_logo.png" alt="Logo"></a>
                        </div>
                        <a class="cd-menu-trigger" href="#main-nav"><span></span></a>
                    </header>
                </div>
            </div>
        </div>
    </div>
</div>

这是 CSS：

    .home{
        background: url(../images/horizontal/home.jpg) no-repeat center top fixed;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        width: 100%;
        overflow: hidden;
    }

我有一个开放的存储库，所以你可以在这里查看网站（和源代码）：https://fieel.github.io/VeraSings/

如果你碰巧用 Mobile Safari 打开它，你只会看到图像的左上角，这显然是不正确的。这是正确的，使用移动 Chrome 浏览我的 Android 设备：

是什么导致了兼容性问题？我的 CSS 中哪些部分会破坏 Mobile Safari 上的内容？

【问题讨论】：

iphone和ipad有问题background-attachment: fixedsir
非常感谢！这可能看起来很傻，但我无法独自解决。有什么方法可以提前知道未来可能出现的兼容性问题？

标签： html css cross-browser mobile-safari

【解决方案1】：

因为data-attachment : fixed 并没有真正起作用。看一会儿https://codepen.io/gentlemedia/pen/JJEzwO

【讨论】：

最好的处理方法是什么？如果我不能使用数据附件属性，如何修复背景图像？我可以在您的 sn-p 中看到您如何使用包装器，这是处理此问题的最佳方法？
我认为这是最好的方法。这是其他stackoverflow.com/questions/23236158/…的一些解释