Indexhibit Support

When viewed on the iPad my site shows a thin vertical dark gray/black line at the edge of div.container. It use to appear all the way around the div but I took care of that with height: 100%. The line apparently appears on the iPad due to its resizing of sites for better viewing, when zoomed in %500 it disappears. I've found it can be eliminated by configuring the viewport for mobile and tablet devices. The problem is if I do that my horizontal scroll stops working. I've also tried my best with the suggestion from other websites to use a -3px margin and 3px transparent border. I've posted a photo of my site with the line here: tinypic.com/r/250sh1i/… The Indexhibit site has the same vertical line.

Anyone else come across this? Any solutions??
Is there a way to configure the viewport to allow hold the sites viewing ratios while allowing overflow for horizontal scrolling?
Is there a code to add a white vertical line that appears to float over the entire site at a fixed position in front of both the index and exhibits?

I've tried the vertical line but can't move it outside of the div.container without it messing up the rest of the site. Was thinking this could be an okay approach. A cosmetic way of dealing with the issue. I look forward to hearing what everyone thinks. My site is danielpritchett.com Cheers!

I'm aware of it - I'm not sure how to deal with it yet because I don't see how it can be affected via CSS.

Hmmm - I found this by searching the web (using keywords div border ios7)
I don't have an iPad or an iPhone but you can try out the solutions mentioned in that url and tell us how it goes:
stackoverflow.com/questions/19088381/…

Nice find! I had searched a few times and found nothing of much help...

Bizarrely, this seems to be triggered when an element is fixed AND has a background color, but only in IOS7 and not if it has a background image. I'd chalk it up as a bug in the browser, but as a workaround for now you could use a solid white image, tiled, as your header background.

Unanimously it must be a bug in iOS Safari. I've read about it appearing in other browsers on the iPad as well so maybe iOS 7 itself. I don't have an iPad but don't remember it happening in previous versions and it doesn't happen on my iPhone with iOS 6. Annoying. Maybe a future update will take care of the issue.

How about a vertical line masking the line in front of all the content, height 100%. I have a feeling it could be a workable solution, but can't figure out how to get the line to exist in front of all content with a fixed position. Is that something that can be done? I've tried placing the code in the index.php, but couldn't get it to properly rest outside of any containers.

Ah, a solid white image, titled. With fixed position? The HTML for this would be placed in Pre-Nav section??

I'm just guessing here (even my Android phone is giving up on me these days - lol):

1. @media {
2.     .ios7 { background: url(URL_OF_A_1X1_PIXEL_IMAGE_HERE) repeat !important; }
3. }

and in your index.php file of your theme add

1. <script>
2. if (navigator.userAgent.match(/(iPad|iPhone|iPod);.*CPU.*OS 7_d/i)) {
3.     $('#index').addClass('ios7');
4. }
5. </script>

Upload a 1X1 px transparent gif or png image in your server and replace its url in URL_OF_A_1X1_PIXEL_IMAGE_HERE

I've added those lines but my client still sees the lines on his iPad...

Thanks Benny_Arts.
No one tried or posted back the results from the "solution" above.
As you may have read from the posts above (and the rest of the threads) this is a ios7 bug...