html - HTML/CSS：在 iPad 上从动态内容到背景的渐变过渡。查看实时示例

Question

这是我当前如何实现此功能的示例：

例子

添加或删除项目时，内容 div 的高度可以动态变化，因此我需要渐变随它移动。这在桌面浏览器中效果很好......但是，当您在 iPad 上查看它并向下滚动（向上移动整个主体）时，它看起来很奇怪，因为位置：固定在渐变 div 上。请注意，这仅在内容 div 小于视口时才会出现问题。如果内容 div 大于视口，它会将渐变推到视野之外并且效果很好。

有什么方法可以防止 iPad 像那样移动身体，或者有没有更好的方法来实现这个功能而不使用位置：固定？

谢谢！

Answer 1

我放弃了渐变 div，而是在内容 div 上设置了一个最小高度，并使用具有以下属性的渐变背景图像：

#content {
    min-height: 200px;
    background-color: white;
    background-image: url(../Images/content-background.png);
    background-position: center bottom;
    background-repeat: repeat-x;
}

Answer 2

你能多解释一下 iPad 上看起来有什么问题吗，我没有随身携带。另外，我删除了位置：固定；并且功能在chrome上没有改变。位置静态和相对工作对我来说是一样的。