I'm facing a problem where a portal that I'm developing to serve pages for mobile devices doesn't display properly for iPhone - there appears some horizontal lines that I later found is a rendering issue.
I've also went through threads discussing similar issues:
But most of them suggest using some way to reduce the margin by 1 or 2 pixels (negative margin) and use the same amount of padding to get it back.
But this exposes the background color, which is undesired.
I don't have the liberty to change the background color of such a div because in my requirement, the content to be displayed, the color styles, layout etc are dynamically built and I can't fiddle around with those changes.
I'm not able to post my exact code here, but I saw a very similar problem faced by another user posted in a different forum. The following is the site:
It renders properly in desktop browsers, but in the iPhone (I used the 3GS) horizontal lines were appearing.
1. Now that it is certain that its a browser issue with Mobile Safari, what is the official FIX for this issue that is not a 'compromise'?
2. Any iOS-specific tags to indicate the browser that it shouldn't apply the smoothening effect around the images?
3. In the case of nested divs, would applying a fix to the outermost div alone would suffice?
Would appreciate some assistance in solving the issue, Thanks!