我知道这不是典型的 StackOverflow 编码问题，但我想深入了解如何修复抖动、图像上方和下方的空白，以及在 Squarespace 网站上滚动时视差部分的闪烁问题。我正在为客户创作。我的视差(索引页)部分为 100vh，所有图像和部分均使用 Flexbox 全宽。
我目前正在使用 Moshka(Brine)模板，并且我读到了一点，这个特定的模板系列存在视差问题，但我希望也许有人有一个想法，我可以尝试修复这些问题使用自定义代码注入(inject)时出现问题。
我能够使用基本的 CSS 和 HTML 来使某些内容看起来像我想要的那样，但我相当缺乏经验，不知道从哪里开始修复 Squarespace 网站的视差之类的事情，希望有人可以为我指明正确的方向(或者告诉我这是没有希望的，这也很好)。
我尝试删除自定义代码、更改视差部分的高度以及更改浏览器的宽度来修复它，但似乎没有任何方法可以阻止抖动和闪烁。如果我删除代码中的 Flexbox 部分，视差图像上方和下方的空白会好一点，但问题仍然存在。
预先感谢您的帮助!很抱歉，如果这不是真正提问的地方。
我不知道是否有必要提供我的自定义代码，但如果人们认为有必要，我可以修改这篇文章以包含一些代码。我在下面提供了我的网站视差部分(穿过图像的 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)是特定的到您提供的示例站点。它们需要根据每个站点进行更改。通过从每个图像的适用部分采样颜色来选择颜色，索引页面部分 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 实现背后的想法是，用户将使用运行良好的设备和浏览器，不会感觉到延迟。显然，情况并非总是如此!
关于html - Squarespace 网站上的视差抖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56063861/