Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 794
  • 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 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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