Solved

Odd gray line appearing when scrolling my screen on iPad

Posted on 2014-01-06
6
723 Views
Last Modified: 2014-01-07
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
Comment
Question by:bbdesign
  • 3
  • 3
6 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39761378
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
 

Author Comment

by:bbdesign
ID: 39761778
Screenshots attached. Thanks for looking!
Screen-Shot-2014-01-07-at-6.47.2.jpg
2.jpg
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39761834
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:bbdesign
ID: 39762022
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39762028
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
 

Author Comment

by:bbdesign
ID: 39762045
Thanks again! Your advice led to a solution, so it was helpful.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Re-position sub-options beneath the TAB 7 77
Help cleaning out CSS 2 51
Help position a graphic properly via CSS 4 23
To remove highlight from a "a href" 5 23
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now