0 Replies Latest reply: Nov 15, 2012 3:34 AM by sivawebmaster
sivawebmaster Level 1 (0 points)



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: 
http://stackoverflow.com/questions/4780896/thin-gray-black-lines-on-web-page-vie wed-with-ipad 
http://stackoverflow.com/questions/3015193/rendering-borders-bug-in-safari-mobil e 
http://stackoverflow.com/questions/4225255/mysterious-horizontal-lines-on-my-sit e-when-rendered-on-ipad 


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. 

    margin-top: -1px; 
    margin-bottom: -1px; 
    padding-top: 1px; 
    padding-bottom: 1px; 


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.

iPhone Screenshot (2).PNG

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!

Safari Mobile, iOS 5, Applies to iPod, iPhone, iPad.