2

我正在开发一个网站，每当我在 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。我尝试禁用所有扩展并加载页面，但这也无济于事。

4

3 回答 3

1

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

更改自：

animation: 0.2s fadeIn forwards 1 ease;

至：

animation: 0.2s fadeIn 1 ease;
于 2019-05-17T11:26:19.023 回答
0

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

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

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

我希望这对其他人有用，因为花了一天的时间才弄清楚这一点。

于 2018-11-11T11:39:19.123 回答
0

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

这是我发现的：

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

我发现有效的解决方案：

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

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

于 2020-07-30T01:30:57.960 回答