【问题标题】:background-attachment:fixed isn't working on iPad背景附件:已修复在 iPad 上不起作用
【发布时间】:2013-11-17 14:06:52
【问题描述】:

有没有 CSS/Modernizr 方法,可以知道浏览器是否支持 background-attachment:fixed ?

我同时使用 background-size 和 background-attachment

background-size:cover;
background-attachment:fixed;

如果它不支持,它仍然对背景大小有影响,我想阻止它。

我更喜欢 Modernizr 方式(比如新测试)。

您可以在此处看到 2 个大“视差”图像(向下滚动) - 使用 css 类:
“视差图像 1”、“视差图像 2”。

http://royalchef-yes.walla.co.il/

【问题讨论】:

标签: css modernizr


【解决方案1】:

我最近也一直在努力解决这个问题。我在设计中有视差条,iOS 用户报告说这些 a) 中的背景图像严重失真,并且 b) 没有视差。我没有 iOS 设备,因此我不得不通过其他人进行调试,但似乎 iOS 故意禁用了视差效果等滚动更新,这在 Chrome 和 Safari 中都会发生。

我无法找到一种方法让视差背景在 iOS 上工作(尽管我注意到有一些 SquareSpace 和其他网站通过将它们换成缩放的内联图像来实现这种效果,这更复杂和时间 -消费比我愿意尝试的东西应该只是工作)。因此,我决定通过重置 background-attachment 值以仅在 iOS 上滚动这些元素来简单地禁用 iOS 的视差效果。由于 Modernizr 检测功能而不是浏览器,因此我不得不使用此脚本检测所有 iOS 设备,然后设置 CSS 样式以覆盖固定值:

https://gist.github.com/jsoverson/4963116

那么我的 CSS 是:

.device-ios .parallax-strip {
    background-attachment:scroll !important;
}

这并不理想(它是一种依赖于设备的 hack,它会降低体验),但考虑到 Apple 对 iOS 视差的敌意(可能是因为它会影响性能),我认为我可以接受它。

希望对其他人有所帮助。

【讨论】:

    【解决方案2】:

    iOS 13 不支持background-attachment: fixed 属性,您需要一个回退函数来克服这个问题。 fallback 函数需要检查设备是 iPhone 还是 iPad。

    var usrAgent = window.navigator.userAgent;
    if (usrAgent.match(/iPad|iPhone/i)) {
        // then do something
    }
    

    【讨论】:

      【解决方案3】:

      我在另一个问题中找到了答案,所以我不确定它是否有效,但尝试一下也无妨:)


      #background_wrap {
      z-index: -1;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-size: 100%;
      background-image: url('xx.jpg');
      background-attachment: fixed;}
      

      并放入

      <body><div id="background_wrap"></div></body>
      

      来源:Using background-attachment:fixed in safari on the ipad

      【讨论】:

      • 我无法使用位置:固定
      猜你喜欢
      • 2017-05-17
      • 1970-01-01
      • 2011-03-01
      • 1970-01-01
      • 1970-01-01
      • 2017-01-30
      • 1970-01-01
      • 1970-01-01
      • 2015-06-09
      相关资源
      最近更新 更多