• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 805
  • Last Modified:

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.
0
Brad Bansner
Asked:
Brad Bansner
  • 3
  • 3
1 Solution
 
Alexandre SimõesManager / Technology SpecialistCommented:
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?
0
 
Brad BansnerWeb DeveloperAuthor Commented:
Screenshots attached. Thanks for looking!
Screen-Shot-2014-01-07-at-6.47.2.jpg
2.jpg
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
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

0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
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!
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
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!
0
 
Brad BansnerWeb DeveloperAuthor Commented:
Thanks again! Your advice led to a solution, so it was helpful.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now