位置：仅在高度上固定

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图像将从底部分离时），而不是宽度。这可能吗？您如何更改代码以使其适用于iOs？

这是通过放置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;

            }

提前致谢！