Squarespace 网站上的视差抖动

Question

我知道这不是典型的 Whosebug 编码问题，但我想深入了解如何修复图像上下的抖动、空白以及在 Squarespace 网站上滚动时视差部分的闪烁我正在为客户创建。我的视差（索引页）部分为 100vh，所有图像和部分全宽使用 flexbox。

我目前正在使用 Moshka (Brine) 模板，我读到一些关于这个特定模板系列存在视差问题的信息，但我希望也许有人有想法我可以尝试使用自定义代码注入解决这些问题。

我可以使用基本的 CSS 和 HTML 使某些东西看起来像我想要的那样，但我相当缺乏经验，不知道从哪里开始进行修复之类的事情Squarespace 网站的视差，希望有人能给我指出正确的方向（或者告诉我这是无望的，这也很好）。

我试过删除自定义代码、更改视差部分的高度以及更改浏览器的宽度来修复它，但似乎无法阻止抖动和闪烁。如果我删除代码中的 flexbox 部分，视差图像上下的空白会好一点，但问题仍然存在。

在此先感谢您的帮助！抱歉，如果这不是正确的提问地点。

我不知道是否有必要提供我的自定义代码，但如果人们认为有必要，我可以修改此 post 以包含一些代码。我在下面的网站视差部分（图像中的 1px 黑线）出现了闪烁的示例。我无法真正捕捉到我得到的空白，因为它们在滚动时出现并在我停止时消失。

再次感谢！

Answer 1

Squarespace 视差索引页面部分之间的这个白色 space 间隙 "tearing" 的 work-around 是在每个图像中创建一个元素 "behind"部分，然后用类似于在两个部分之间的过渡区域中看到的颜色（或渐变）填充该元素。

在每个具有背景图像的部分与具有平坦背景颜色的部分交替出现的情况下，此方法效果更好。

但是，它仍然可以在您的情况下充分发挥作用，其中图像 butted-up 对比 one-another（并且图像 top/bottom 的颜色相对一致图片的宽度）。

以下 CSS，通过 Squarespace CSS 编辑器插入，将使 "tearing" 在示例站点 部分之间几乎不可察觉提供.

.Index-page--has-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}
#welcome:before {
    background-color: #232125;
}
#last:before {
    background-color: #CAB8B1;
}

当然，"tearing" 仍在发生，但我们正在用接近图像颜色的颜色填充白色间隙（非常明显）（因此不易察觉） ).

请注意，颜色 (232125、CAB8B1) 和 ID (welcome、last) 特定于您提供的示例网站。它们需要在 per-site 的基础上进行更改。这些颜色是通过从每个图像的适用部分采样颜色来选择的，index-page 部分 ID 由 Squarespace 根据每个页面的页面设置中的 "URL slug" 分配。

现在，让我们更仔细地看一下。

虽然上面的 CSS 使得部分之间的撕裂难以察觉，但第一部分和导航栏（白色）之间以及最后一部分之间仍然存在撕裂部分和页脚（海军蓝色）。

所以，我们必须变得更复杂一些，在 pseudo-element 上添加一个 background-gradient。为此，您将使用类似这样的东西而不是上面的 CSS:

.Index-page--has-image:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
}
#welcome:before {
    background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#232125 50%,#232125 100%);
}
#last:before {
    background: linear-gradient(to bottom,  #CAB8B1 0%,#CAB8B1 50%,#081359 50%,#081359 100%);
}

值得一提的是，这不是 Squarespace 的问题，而是 Javascript 滚动事件和页面呈现的性质。偏移量基于页面滚动的量（过去式），因此当然无法计算该量（然后 acted-upon）直到 after 滚动发生。所以本质上偏移量总是"catching up"。 Squarespace 实施背后的想法是，用户将使用运行足够好的设备和浏览器，以至于不会察觉到延迟。显然，情况并非总是如此！

Squarespace 网站上的视差抖动

Parallax Jitter on Squarespace Site

html

css

parallax

flicker

squarespace