Squarespace网站上的视差抖动

Question

我知道这不是典型的StackOverflow编码问题，但是我想了解一些有关如何解决抖动，图像上方和下方的空白以及在Squarespace网站上滚动时视差部分闪烁的信息， m为客户创建。我的视差（索引页面）部分为100vh，所有图像和部分都使用flexbox全宽。

我目前正在使用Moshka（盐水）模板，并且我已经读过一点，这个特殊的模板系列在视差方面存在问题，但是我希望有人可能会尝试解决这些问题自定义代码注入问题。

我能够使用基本的CSS和HTML来使内容看起来像我想要的那样，但是我相当缺乏经验，也不知道从哪里开始，例如修复Squarespace网站的视差，希望有人可以为我指明正确的方向（或者告诉我这是没有希望的，这也很好）。

我尝试删除自定义代码，更改视差部分的高度，并更改浏览器的宽度以对其进行修复，但似乎没有任何方法可以阻止抖动和闪烁。如果删除代码的flexbox部分，则视差图像上方和下方的空白会更好一些，但问题仍然存在。

在此先感谢您的帮助！很抱歉，如果这不是真正合适的地方。

我不知道是否有必要提供我的自定义代码，但是我可以修改此帖子，以便在人们认为有必要时提供一些信息。我在下面提供了一个示例，该示例说明了我在网站的视差部分（图像中的1px黑色线）闪烁的情况。我无法真正捕捉到我得到的空白，因为它们在滚动时出现，并在我停下来时消失。

再次感谢！

Answer 1

Squarespace视差索引页面部分之间的空白“撕裂”的变通方法是在每个部分中的图像“后面”创建一个元素，然后用类似于以下内容的颜色（或渐变）填充该元素：这是在两个部分之间的过渡区域中看到的。

这在具有背景图像的每个部分与具有平坦背景颜色的部分交替显示的情况下效果更好。

但是，它仍然可以在您的情况下正常工作，其中图像彼此相对（并且图像顶部/底部的颜色在图像宽度上相对一致）。

通过Squarespace CSS编辑器插入的以下CSS将使在您提供的示例网站上的部分之间的“撕裂”几乎不可察觉。

.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;
}

当然，“撕裂”仍在发生，但是我们用一种接近图像颜色的颜色（很不容易被察觉）填充了白色的缝隙（非常容易察觉）。 >

请注意，颜色（232125，CAB8B1）和ID（welcome，last）特定于您提供的示例站点。他们将需要在每个站点的基础上进行更改。通过从每个图像的适用部分中采样颜色来选择颜色，然后由Squarespace根据每个页面的页面设置中的“ URL slug”分配索引页面部分ID。

现在，让我们仔细看看。

虽然上述CSS使得在区域之间的撕开 难以察觉，但是在第一部分和导航栏之间（白色）以及在最后一段和页脚之间（深蓝色）仍然存在撕裂。

因此，我们必须变得更加复杂，为伪元素添加背景渐变。为此，您可以使用类似这样的方法代替上面的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滚动事件和页面渲染的性质。偏移量基于页面滚动了多少（过去时），因此，当然要等到滚动发生后，才能计算（然后按）。因此，偏移量在本质上总是“追赶”。 Squarespace实施背后的想法是，用户将处于运行良好且不会察觉到延迟的设备和浏览器上。显然，并非总是如此！