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画像が下から切り離されます）、幅は固定されません。これは可能ですか？コードをどのように変更して、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;

            }

前もって感謝します！