Html 平方空间站点上的视差抖动

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

我目前正在使用Moshka（盐水）模板，我已经读到一些关于这个模板家族在视差方面存在问题的信息，但我希望有人能想到我可以尝试使用自定义代码注入来解决这些问题

我能够使用基本的CSS和HTML使一些东西看起来像我想要的，但我相当缺乏经验，不知道从哪里开始，比如修复Squarespace站点的视差，希望有人能给我指出正确的方向（或者告诉我这是没有希望的，这也很好）

我试着删除我的自定义代码，更改视差部分的高度，并更改浏览器的宽度来修复它，但似乎没有任何东西可以阻止抖动和闪烁。如果删除代码中的flexbox部分，视差图像上方和下方的空白会稍微好一点，但问题仍然存在

提前感谢您的帮助！如果这不是一个合适的地方，我很抱歉

我不知道是否有必要提供我的自定义代码，但如果人们认为有必要，我可以修改这篇文章，加入一些。我已经包括了一个闪烁的例子，我在我的网站视差部分（通过图像的1倍黑线）下面得到。我无法真正捕捉到我得到的空白，因为它们在滚动时出现，在我停止时消失

---

再次感谢

方形空间视差索引页面部分之间的空白间隙“撕裂”的解决方法是在每个部分中的图像“后面”创建一个元素，然后使用与两个部分之间的过渡区域中看到的颜色（或渐变）相似的颜色（或渐变）填充该元素

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

但是，它仍然可以在您的情况下充分发挥作用，在这种情况下，图像相互对接（并且图像顶部/底部的颜色在图像宽度上相对一致）

通过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

）特定于您提供的示例站点。它们需要根据每个站点进行更改。通过从每个图像的适用部分采样颜色来选择颜色，索引页面部分ID由Squarespace根据每个页面的页面设置中的“URL slug”分配

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

虽然上面的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实现背后的理念是，用户将在运行良好的设备和浏览器上，这样就不会感觉到延迟。显然，情况并非总是如此

您是对的，这是启用视差的Squarespace站点的典型问题。虽然特定的CSS具体取决于站点/索引页面，但它通常是可以修复的。这还取决于问题是“典型”问题，还是由代码引入的问题。您能否提供相关网站的链接（确保网站的可见性设置为“公共”，并提供“仅临时查看”密码）？您好！谢谢你的回复！对不起，我花了些时间才给你回电话。我认为我不允许分享我们的客户网站（保密性和所有这些），所以我使用完全相同的主题重新创建了网站的第一页，创建了相同的样式，并将自定义css粘贴到其中。我也遇到了同样的问题，所以我觉得这样好吗？下面是tester站点的链接，密码是：test非常感谢您的修复！这确实让事情变得更好了！我也很感激你解释为什么我的视差也有这么多有趣的东西，这帮助我以不同的方式思考这个问题。我会记住这个解决我以后视差问题的方法。再次感谢！