谷歌浏览器切断了长页面的底部

Question

我正在开发一个网站，每当我在 chrome 上加载一个相当长的页面时，它都会创建某种框来覆盖我的页面底部。长页面在 Safari 和 Firefox 上看起来不错；只有 Chrome 会导致此问题。

行为如下所示：

这是有问题的页面：https://nosh-staging.herokuapp.com/events 如果您一直滚动到底部，您会注意到覆盖页面最后 15% - 20% 的巨大白框。

我注意到的几个怪癖：

1. 我使用的是 15" MBP（1440 x 900 分辨率屏幕）和 27" Thunderbolt 显示器 (2560 x 1440)。当我在 Thunderbolt 显示器中打开 Chrome 时，页面加载得很好。一旦我将窗口移动到我的 15 英寸屏幕，它就会覆盖页面的整个底部。

2. 当我检查元素时，所有代码似乎都能正常加载。几乎感觉就像 Chrome 在页面顶部放置了一个巨大的框。当我尝试单击 + 拖动以选择文本时，由于该框，我看不到选择。

我目前正在开发 Rails 3.2.13 和 Ruby 2.0.0。在 Chrome 版本上测试了页面。 30.0.1599.101，火狐版本。 25.0 和 Safari 7.0。我已经尝试禁用所有扩展并加载页面，但这也没有帮助。

Answer 1

我遇到了同样的问题 - 长页面仅在 Chrome 中被截断了一半。这里的其他答案不起作用，但是在被切断的元素上稍微改变了我的 css 动画。我删除了下面的forwards，问题就停止了。奇怪。

更改自：

animation: 0.2s fadeIn forwards 1 ease;

收件人：

animation: 0.2s fadeIn 1 ease;

Answer 2

在 Chrome 中页面底部被截断时，我遇到了非常相似的问题。页面在滚动时也会闪烁。

它在所有其他浏览器中呈现良好。

就我而言，解决方案是从页面上的element 中删除{mix-blend-mode: multiply;}。这导致所有奇怪的渲染错误都消失了。

我希望这对其他人有用，因为它花了一天的时间来解决这个问题。

Answer 3

在两个单独的项目中遇到了非常相似的问题，并且这只发生在桌面版 Chrome（Mac 和 Windows）和 Android 版 Chrome 中。

这是我发现的：

1. 似乎 CSS 动画的可见“渲染区域”有限。
2. 当您使用“向前”将动画应用于元素时，它会保持此状态并“渲染”。
3. 当您在“向前”卡住的容器元素内的多个元素中制作动画时，这也会导致动画延迟。

我发现可行的解决方案：

1. 减少动画“区域”，即：用较小的像素区域为元素制作动画，而不是较大的容器。
2. 当想要为大型容器元素设置动画时，即：淡入所有内容 - 不要将动画应用于容器。创建一个完全覆盖您的内容的元素，然后为其设置动画（淡出）。

上面的@TimothyBuktu 解决方案帮助我指明了正确的方向。