背景附件：固定在 Safari 中不起作用

Question

我有一个具有background-attachment: fixed CSS 样式的 div 来实现视差效果，该效果在 chrome 中完美运行，但在 Safari 中却无法运行。在 Safari 中滚动过去时会导致极度抖动，以至于无法按原样离开。当我注释掉这个 CSS 属性时，抖动就会停止（突出问题是这个特定的样式属性）。我查看了有关此问题的其他帖子，但尚未找到可以解决此问题或提供解决方法的内容。

CSS：

#gallery {
  background: url("../images/parallax-image.jpg");
  background-size: cover;
  background-position: top right;
  background-attachment: fixed;
  height: 45vh;
  position: relative;
}

Answer 1

iOS 存在阻止 background-attachment:fixed 与 background-size:cover 一起使用的问题。来自“我可以使用”。

可以查看 Can I Use 选项卡“已知问题”。

https://caniuse.com/#search=background-attachment

还有详细的链接

Background size on iOS

也许是“背景尺寸：100% 100%；”可以帮忙。

或使用下面的其他 div 背景。

对不起，我没有 ios 可以检查它的工作原理。

    body{
      height: 200vh;
    }
    .container{
      position: relative;
      height: 1920px;
    }
    .bgc{
      position: absolute;
      top: 0;
      left: 0;
      width: 1920px;
      height: 1080px;
      background-image: url('https://picsum.photos/1920/1080/?random=1');
      background-attachment: fixed;
    }

  <div class="container">
    <div class="bgc">
    </div>
  </div>