Odd gray line appearing when scrolling my screen on iPad

This is a test URL for some iPad optimization I am doing on a website:
http://www.cherrystoneauctions.com/test

When you scroll down, the blue/black marble menu should "stick" to the top of your device window. When you scroll back up, it should "unstick".

If I hold my finger on the screen to drag scroll, and make the menu "stick", I end up with a gray line at the bottom of the "#fixnav" element, right below the menu.

If I flick my finger to auto-scroll instead of dragging, the gray line does not appear.

If I do the same thing using Firefox (on my computer, not iPad), I also see a gray line, but its not in the exact same place.

I don't see anything in my CSS that would create a border or background to cause that line to display. I am using jQuery/Javascript to add and remove classes, but everything else is CSS. Is there something I am doing wrong? Would appreciate any advice!

Thank you.
Brad BansnerWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Solutions ArchitectCommented:
Hi mate,
I can't see any line on FF and I don't have an iPad to test that.

If you can reproduce it on FF, could you take a screenshot and point where the line is?
Brad BansnerWeb DeveloperAuthor Commented:
Screenshots attached. Thanks for looking!
Screen-Shot-2014-01-07-at-6.47.2.jpg
2.jpg
Alexandre SimõesManager / Solutions ArchitectCommented:
Sorry mate, I cannot replicate it on the PC.

My only guess is that it's rendering a border on the #fixnav element.
Can you try replacing the line 239 on main.css by this one:
div#fixnav.stuck{border: none;position:fixed;top:-2px;}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Brad BansnerWeb DeveloperAuthor Commented:
That didn't fix it, but adding border:1px solid #fff did fix it. Must have had something to do with overlapping elements and background colors. I don't know why that fixed it, I don't really want a border around that elements, but at this point I'm fine with this. Seems to only happen on a few browsers/devices, so probably an anomaly. Thanks!
Alexandre SimõesManager / Solutions ArchitectCommented:
As we're hacking probably setting it like this should make it better:
border:1px solid transparent;

Open in new window


Shouldn't make any difference from what you achieved but at least there's no actual border color...

Sorry I couldn't be more helpful.

Cheers!
Brad BansnerWeb DeveloperAuthor Commented:
Thanks again! Your advice led to a solution, so it was helpful.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.