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

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 ver上测试了这些页面。 30.0.1599.101，Firefox ver。 25.0和Safari 7.0。我已经尝试禁用所有扩展并加载页面，但这也无济于事。

Answer 1

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

在所有其他浏览器中都可以正常显示。

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

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

Answer 2

我遇到了同样的问题-长页面仅在Chrome中被切掉一半。这里的其他答案不起作用，但是在被剪切的元素上稍微更改css动画是可以的。我删除了下面的forwards，问题停止了。 izz子

更改自：

animation: 0.2s fadeIn forwards 1 ease;

收件人：

animation: 0.2s fadeIn 1 ease;

Answer 3

在两个单独的项目中发生了非常相似的问题，并且仅在台式机（Mac和Windows）上的Chrome和Android版Chrome中发生。

这是我发现的东西：

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

我发现有效的解决方案：

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

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