Hi guys,
I spent lot of hours trying to figure out the following mystery that is happening on iPhone with rendering my rounded corner box.
It is a simple technique where there are 3 divs and basically 3 parts of the box: top, middle and bottom. Where the middle is repeating on the y-axis and top and the bottom are absolutely positioned to their place.
It works great everywhere except iPhone where when the page is zoomed out there are "1px spaces/gaps" between top/bottom and middle part of the images. Interesting is that the gaps disappear when you start zooming in, so the spaces are there only just in some level of zoom.
I prepared an example to illustrate this issue, you can see it online here http://j.mp/iphonebug
I would really appreciate any ideas how to fix/solve this rendering issue.
Thank you so much!