css - 位置：仅在高度上固定

Question

我正在处理这个页面：http: //jsfiddle.net/Saturnix/4RzyG/embedded/result/

代码在这里：http: //jsfiddle.net/Saturnix/4RzyG/

它在 Safari/Firefox/Chrome 和其他不错的浏览器中运行良好。但是，当使用 Safari Mobile 打开它并捏合（放大）时，会发生一些奇怪的事情。

如您所见，文本在页面底部逐渐消失：这是由于在中央 div 底部应用了具有透明度的 png 图像。它们都占用相同的空间并处理窗口大小调整，但不能处理 Safari Mobile 缩放。

如果您阅读代码，这是有道理的：底部渐变（png 图像）用于position: fixed始终保持在页面的中心，但是一旦您使用 Safari Mobile “捏合”，它将始终保持在中心。

我希望仅针对元素的高度固定位置（否则在滚动 png 图像时会从底部分离），而不是宽度。这可能吗？您将如何更改代码以使其在 iO 上运行？

这是通过放置 png 图像来控制文本淡出的 css 代码

.bottom_fade_center {
            position: fixed;
            bottom: 0;

            width: 80%;
            left: 10%;

            background: url("bottom-fade.png");
            background-repeat:repeat-x;
            height: 400px;
            pointer-events:none;
            z-index: 3;

            }

提前致谢！