I was having similar issues with fixed-position elements dipping behind relative-positioned elements when zooming on the relative-positioned content. I was determined to figure out a solution.
When I changed the relative-positioned element back to static, all was well, but then that element was being covered by the fixed position elements. This was the reason I changed that element to relative to begin with... so I could put a z-index on it.
I also tried dynamically assigning the CSS styles of position and z-index, but that didn't seem to change anything either.
Then, I removed the 'left' CSS style from the stylesheet, and I dynamically assigned a style of 'right' via JS, with a value equal to the width of the window, minus the width of that fixed-position element, and this seemed to improve the issue, but not 100%.
Then I found your thread here, and tried your code. I uploaded an HTML file with your code to my server, then loaded that page up in my iPhone, and tried zooming around. I saw no such issues with your text being blurred. Odd enough.
So then I went back to my other page, refreshed, and all was well, even with the fixed-position elements dipping behind the relative-positioned element.
Thus, it seems this is a bug, perhaps caused by low memory or something. I'm not 100% sure, but without being able to reproduce the issue so easily, it may be hard to report such a bug to Apple's iPhone/Safari Mobile development team. :\
