position: fixed only on height

问题

I'm working on this page: http://jsfiddle.net/Saturnix/4RzyG/embedded/result/

code is here: http://jsfiddle.net/Saturnix/4RzyG/

It works fine in Safari/Firefox/Chrome and other decent browsers. However, when opening it with Safari Mobile and pinching (zomming in) something strange happens.

As you can see, text fades away at the bottom of the page: this is done thanks to a png image with transparency applied at the bottom of the central div. They are both made to occupy the same space and handle window resizing but not Safari Mobile zooming.

This makes sense if you read the code: the bottom gradient (the png image) uses position: fixed to stay always at the center of the page but, as soon as you "pinch in" with Safari Mobile, it will always remains in the center.

I'd like the position to be fixed only for the height of the element (otherwise when scrolling the png image will detach from the bottom) but not for the width. Is this possible? How would you change the code to make it work on iOs?

This is the css code which control the text fade out by placing the png image

.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;

            }

Thanks in advance!

来源：https://stackoverflow.com/questions/14967641/position-fixed-only-on-height